如何让一个div填充剩余的水平空间?

我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航

当前回答

@Boushley的回答是最接近的，但是有一个问题没有解决，但已经指出了。右边的div取浏览器的整个宽度;内容采用预期的宽度。为了更好地看待这个问题:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

内容在正确的位置(在Firefox中)，但是宽度不正确。当子元素开始继承width时(例如，width: 100%的表)，它们被赋予的宽度等于浏览器的宽度，导致它们溢出页面的右侧并创建一个水平滚动条(在Firefox中)或不浮动并向下推(在chrome中)。

您可以通过向右列添加overflow: hidden来轻松解决这个问题。这将为内容和div提供正确的宽度。此外，表格将接收正确的宽度，并填充可用的剩余宽度。

我尝试了上面的一些其他解决方案，它们在某些边缘情况下并不完全有效，而且太复杂了，无法进行修复。这很有效，也很简单。

如果有任何问题或顾虑，请尽管提出来。

2012-04-18 23:24:36

其他回答

我在Boushley的答案中发现的问题是，如果右列比左列长，它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后，我找到了一个教程(现在链接死了)，如何创建三列页面。

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

基本上，在上面的简单例子中，将第一列向左浮动，并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:

下面是Stack Snippets & jsFiddle中的一个演示

#{离开浮:左; 宽度:180 px; ｝ #{正确 margin-left: 180 px; ｝ /*只是为了突出div，例如*/ #left {background-color:粉色;｝ #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .

在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。

2011-05-10 19:20:22

如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

2016-11-17 16:32:31

解决方案来自display属性。

基本上你需要让两个div像表格单元一样。所以不是使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度div，你需要设置width:auto;也。这两个div都应该放在一个100%宽度的容器中，并使用display:table属性。

下面是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上指定float属性，否则空间将不会被填充。

我希望这能解决你的问题。如果你愿意，你可以在我的博客上阅读关于这一点的完整文章。

2011-03-24 09:13:20

如果你不需要兼容某些浏览器的旧版本(例如IE 10 8或更低版本)，你可以使用calc() CSS函数:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

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

2015-09-28 14:38:02

如果有人需要相同的解决方案，但没有固定长度的左div:

如果你想让左边的div占据所有的空间，你可以删除固定大小的180px。参见下面的CSS:

#left {
  float: left;
  background-color: red;
}

#right {
  background-color: yellow;
  flex-grow: 1
}

参见这里的JSFiddle: JSFiddle -div-space

2021-07-27 14:34:19

如何让一个div填充剩余的水平空间?

推荐文章

最新文章

标签