两根浮动柱——一根固定，一根松宽答案

【问题标题】：Two floated columns - one fixed, one loose width两根浮动柱——一根固定，一根松宽
【发布时间】：2011-06-08 06:24:22
【问题描述】：

我环顾了SO，但找不到与我的情况相匹配的，我基本上有两列，一列固定宽度（185px），另一列没有固定宽度，但是我需要最后一列来填充最后一个空格，例如

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

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

【问题讨论】：

标签： html css css-float

【解决方案1】：

实际上有一种比使用浮点数更简单的方法：

.container {
    position: relative;
}

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

.right {
    margin-left: 185px;
}

【讨论】：

这很好用...但是在容器之后我有页脚...发生的是...页脚不是在容器之后...而是它成为容器的中间。
@Jacob 可以使用 % 代替特定像素吗？
如果内容不够大，正确的宽度不会拉伸 100%？

【解决方案2】：

通过使用负边距from this tutorial，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;
}

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

http://jsfiddle.net/Y5FAT/

【讨论】：

【解决方案3】：

编辑解决方案，这次使用 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;
}

  <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>

【讨论】：

右栏不会像这样自动填充可用空间，而是使用所需的最小空间来显示其内容。
@TimothyGroote 这是我使用flexbox 更新的解决方案，右列现在应该填充/增长到可用空间jsfiddle.net/ouymLfoz 谢谢。
好的，这似乎可行。但是你为什么不更新答案呢？

【解决方案4】：

看看this。没有任何演示，但我以前使用过这个人的教程，所以我认为它工作正常。我从文章中了解到，主要内容是液体。侧面内容也可能是液体，但我认为你可以给它一个固定的宽度并让它保持不变。这里的诀窍是首先放置主要内容。

【讨论】：

【解决方案5】：

“位置：绝对；”答案非常好，但它具有跨浏览器的含义，特别是如果您正在为 IE 开发。完成此操作的最佳方法如下：

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

请注意，您需要在右侧的 div 在 HTML 中首先被调用。另外，请注意在列之后清除浮动，如果您在下面有内容，或者如果有父容器，这将派上用场。

【讨论】：

注意；不管它是一个演示，在头部有样式都是不好的做法。在 CSS 中按元素名称和类名称（例如 div.right）选择元素也是不好的做法 - 只需类名称就足够了。

【解决方案6】：

如果您既不想使用浮点数也不想使用绝对定位，我能想到的最简单的方法是

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>

【讨论】：

【解决方案7】：

嗯，批准的答案是一个很好的答案，但对于那些正在寻找更多信息的人来说，这里有一个链接。希望您觉得这个有帮助。 ;)

http://www.dynamicdrive.com/style/layouts/category/C13/

【讨论】：

【解决方案8】：

我已经尝试了几乎所有上述解决方案，直到我偶然发现这个，它对我来说非常有用。 How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

不知道为什么，您似乎只需要浮动具有固定宽度的列。其余的就到位了。

【讨论】：