Question

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

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

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

Answer 1

实际上比使用浮动更简单：

.container {
    position: relative;
}

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

.right {
    margin-left: 185px;
}

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

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

Answer 4

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

Answer 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中首先被调用。另外，请注意在列之后清除浮动，如果您有下面的内容，或者如果有父容器，则会派上用场。

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

Answer 7

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

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

Answer 8

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

不确定为什么，似乎你只需要浮动具有固定宽度的列。其余的只是落实到位。

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

8 个答案: