两个浮动柱 - 一个固定,一个宽松的宽度

Question

两个浮动柱 - 一个固定,一个宽松的宽度

我环顾四周SO,但找不到与我的匹配相匹配的一个,我基本上有两列固定宽度(185px),另一列没有固定宽度,但我需要最后一列填充最后一个空格,例如

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

Run Code Online (Sandbox Code Playgroud)

当第二列填充剩余宽度时,第一列应该总是100%到底部,它们都是浮动的left,如果我调整浏览器窗口的大小,第二列显示在第一列下面.我需要第二列来填充剩余的宽度,并在调整浏览器窗口大小时保持灵活性.

Answer 1

Jac*_*cob 64

实际上比使用浮点数更简单:

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}

Run Code Online (Sandbox Code Playgroud)

这很有效......但是在容器之后我有了页脚......发生了什么......页脚不是在容器之后...而是它变成了容器的中间位置. (8认同)

Answer 2

Sta*_*ano 8

通过使用本教程中的负边距, CSS可以如下所示

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

Answer 3

Ger*_*sig 6

编辑了解决方案,这次使用flexbox,使左列固定使用flex: 185px 0 0;然后使右列自动生长使用flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}

Run Code Online (Sandbox Code Playgroud)

  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>

Run Code Online (Sandbox Code Playgroud)

右列不会像这样自动填充可用空间,而是使用最小的所需空间来显示其内容. (5认同)

Answer 4

Zom*_*lla 2

看看这个。没有任何演示，但我之前使用过这个人的教程，所以我认为它工作得很好。我从文章中得知主要内容是液体。侧面内容也可能是液体，但我认为你可以给它一个固定的宽度并保留它。这里的技巧是将主要内容放在第一位。

归档时间：	14 年，8 月前
查看次数：	34310 次
最近记录：	8 年，1 月前