Question

所以我有这样的布局：

div {
  border: 1px solid
}

<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>

col_1和col_2占用了固定的空间。我希望第三列能够占用其余部分。完成此任务的最佳方法是什么？

Answer 1

你可以做一些疯狂的事情，抛弃javascript和非常适合黄金时段的CSS3并使用绝对定位。

见this jsfiddle。通过浏览器调整表现良好的奖励积分。

#col_1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-color: #eee;
}
#col_2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 150px;
  left: 100px;
  background-color: #ccd;
}
#col_3 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 250px;
  right: 0px;
  background-color: #cdc;
}

<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
  Column 3
</div>

Answer 2

这需要Javascript。如果你想要所有3个div填满窗口空间（100％），那么我们需要使用javascript来检测剩余的空间并相应地指定col_3的高度。使用jQuery，你可以做到

var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height);

Answer 3

你已经接受了答案，但你可以查看CSS Flexbox，它旨在解决这个问题，而不依赖于“float：left”黑客攻击。它适用于Chrome，Safari和FF（带有-webkit和-moz前缀）。还没在IE上。

以下是一些快速链接：

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/

Answer 4

您需要一个块格式化上下文：

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

它是溢出使它工作。更多信息：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 5

这是我想过只使用一些CSS的东西。我在FF12，GC18，SAF5.1＆amp; IE 7,8,9,9CV。

.Clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.Clearfix {
  display: inline-block;
}
html[xmlns] .Clearfix {
  display: block;
}
* html .Clearfix {
  height: 1%;
}
#Wrapper {
  background-color: #FC20C9;
}
#col_1 {
  float: left;
  width: 150px;
  background-color: #FF0000;
}
#col_2 {
  float: left;
  width: 100px;
  background-color: #00CC00;
}
#col_3 {
  width: auto;
  float: none;
  background-color: #0066FF;
  overflow: hidden;
}

<div id="Wrapper" class="Clearfix">
  <div id="col_1">Lorem ipsum</div>
  <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here

Answer 6

使用jQuery计算剩余空间，或使用css3 flexible框填充剩余空间：

http://www.html5rocks.com/tutorials/flexbox/quick/

图2是你想要的情况 - 最后'box-flex'的最后一个框将占用剩余空间（默认box-flex为0）

Answer 7

如果您定位最新的浏览器，则可以使用HTML5 calc功能

#col_3 {
  width: calc(100%-(100px+150px));
}
#red {
  border: 1px solid goldenrod;
}
div {
  border: 1px solid;
}

<div id="red">
  <div id="col_1" style="width:150px; float:left;">1</div>
  <div id="col_2" style="width:100px; float:left;">2</div>
  <div id="col_3">3</div>
</div>

Answer 8

取下宽度，它应该展开以填充所有内容。放宽度：100％如果你愿意的话。你应该查看firefox的firebug插件。

Answer 9

将所有三个div放入一个容器中，给出col 1和2固定宽度，并将3rd设置为auto。

CSS HTML - DIV高度填充剩余空间

9 个答案: