如何让div填充剩余的水平空间？

我有2个div：一个在我的页面左侧和一个在右侧。 在左边的那个有固定的宽度，我想要右边的一个填充剩余的空间。

右侧是导航，我希望它填充右侧的剩余空间：

#search {
    width: 160px;
    height: 25px;
    float: left;
    background-color: #ffffff;
}
#navigation {
    width: 780px;
    float: left; 
    /*background-color: url('../images/transparent.png') ;*/
    background-color: #A53030;
}

<div id="search">Text
</div>
<?php include("navigation.html"); ?>
<div id="left-column">
</div>

---

这似乎完成了你要去的。

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

---

我在Boushley的回答中发现的问题是，如果右列比左更长，它将围绕左边并恢复填充整个空间。 这不是我正在寻找的行为。 在搜索了很多'解决方案'之后，我发现这个关于创建三个列页面的令人敬畏的教程。

作者提供了三种不同的方式，一种是固定宽度，一种是三个可变的柱子，另一种是固定的外部柱子和可变宽度的中间。 比我发现的其他例子更加优雅和有效。 大大提高了我对CSS布局的理解。

基本上，在上面的简单情况下，将第一列浮起并给它一个固定的宽度。 然后给右边的列留下比第一列稍宽的左边界。 而已。 完成。 Ala Boushley的代码：

这里是Stack Snippets ＆ jsFiddle的演示

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

---

解决方案来自display属性。

基本上你需要使两个div像表格单元一样工作。 因此，不必使用float:left ，而必须在两个div上使用display:table-cell ，对于动态宽度div，您需要设置width:auto; 也。 这两个div应放置在具有display:table属性的100％宽度容器中。

这是CSS：

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

和HTML：

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要提示：对于Internet Explorer，您需要在动态宽度div上指定浮动属性，否则空间将不会被填充。

我希望这会解决你的问题。 如果你愿意，你可以在我的博客上阅读我写的这篇文章。

链接地址: http://www.djcxy.com/p/15501.html

上一篇: How to make a div fill a remaining horizontal space?

下一篇: Make Iframe to fit 100% of container's remaining height