如何使div来填充剩余的水平空间？
我有2个div：一个在左侧，另一个在我的页面右侧。 在左边的一个有固定的宽度，我想右边的一个来填补剩下的空间。
在右侧的是导航，我想要它来填补右侧的剩余空间：
我的CSS：
#search { width: 160px; height: 25px; float: left; background-color: #FFF; } #navigation { width: 780 float: left; /*background-color: url('..http://img.dovov.comtransparent.png') ;*/ background-color: #A53030; } 我的Html：
<div id="search"> </div> <?php include("navigation.html"); ?> <div id="left-column">
预先感谢！
这似乎完成了你要去的。
#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的答案中发现的问题是，如果右列比左更长，它将围绕左边并重新填充整个空间。 这不是我正在寻找的行为。 在search了很多'解决scheme'后，我发现这个关于创build三个列页面的令人敬畏的教程 。
作者提供了三种不同的方式，一种是固定宽度，一种是三个可变的列，一个是固定的外部列和一个可变的宽度中间。 比我发现的其他例子更优雅和有效。 大大提高了我对CSS布局的理解。
基本上，在上面的简单情况下，将第一列浮起，并给它一个固定的宽度。 然后给右边的一列比第一列宽一点。 而已。 完成。 Ala Boushley的代码：
<html> <head> <title>This is My Page's Title</title> <style type="text/css"> #left { float:left; width:180px; background-color:#ff0000; } #right { margin-left: 190px; background-color:#00FF00; } </style> </head> <body> <div> <div id="left"> left </div> <div id="right"> right </div> </div> </body> </html>
以Boushley的例子来说，左边一列是右边的另一列。 只要左列结束，右边开始再次填充整个空间。 在这里，右侧的列进一步简单地alignment到页面中，左侧的列占据了大量的页边距。 无需stream量交互。
解决scheme来自显示属性。
基本上你需要使两个div像表格单元一样工作。 所以，而不是使用float:left ，你将不得不使用display:table-cell在div上，而对于dynamic宽度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('..http://img.dovov.comtransparent.png') ;*/ background-color: #A53030; } *html #navigation {float:left;}
而HTML：
<div class="container"> <div id="search"></div> <div id="navigation"></div> </div>
重要提示：对于Internet Explorer，您需要在dynamic宽度div上指定浮动属性，否则空间将不会被填充。
我希望这会解决你的问题。 如果你愿意，你可以阅读我在博客上写的关于这个的完整文章。
由于这是一个相当stream行的问题，我倾向于使用BFC分享一个很好的解决scheme。
下面的Codepen示例在这里 。
.left { float: left; width: 100px; } .right { overflow: auto; }
在这种情况下， overflow: auto触发上下文行为，并使正确的元素只扩展到可用的剩余宽度，如果.left消失，它自然会扩展到全宽度。 对于许多用户界面布局来说，这是一个非常有用且干净的技巧，但也许很难理解“为什么它起作用”。
现在，使用flex-box方法（可以适应所有浏览器与 – 前缀）
.container { display: flex; } .left { width: 180px; } .r { flex-grow: 1; }
更多信息： https ： //css-tricks.com/snippets/css/a-guide-to-flexbox/
@ 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>
内容是在正确的地方（在Firefox中），但是，宽度不正确。 当子元素开始inheritance宽度（例如width: 100%的表）时，它们的宽度等于浏览器的宽度，导致它们溢出页面右侧，并创build一个水平滚动条（在Firefox中）或不漂浮和被推下来（在铬）。
你可以通过添加overflow: hidden到右边的列。 这为内容和div提供了正确的宽度。 此外，表格将接收正确的宽度并填充剩余的可用宽度。
我尝试了一些上面的其他解决scheme，他们没有充分利用某些边缘案例，太复杂，以保证解决这些问题。 这工作，很简单。
如果有任何问题或疑虑，随时提出。 谢谢！
如果您不需要与某些浏览器的旧版本兼容（例如IE 10 8或更低版本），则可以使用calc() CSS函数：
#left { float:left; width:180px; background-color:#ff0000; } #right { float: left; width: calc(100% - 180px); background-color:#00FF00; }
这里是一个可接受的解决scheme的一个小小的修复，它可以防止右栏落在左栏下。 更换width: 100%; overflow: hidden; 一个棘手的解决scheme，如果有人不知道。
<html> <head> <title>This is My Page's Title</title> <style type="text/css"> #left { float: left; width: 180px; background-color: #ff0000; } #right { overflow: hidden; background-color: #00FF00; } </style> </head> <body> <div> <div id="left"> left </div> <div id="right"> right </div> </div>
http://jsfiddle.net/MHeqG/2600/
同时检查三个列布局的示例： http : //jsfiddle.net/MHeqG/3148/
Boushley的答案似乎是最好的方式去使用浮游物来安排这个。 但是，这并非没有问题。 在展开的元素中嵌套浮动将不会提供给您; 它会打破页面。
所展示的方法在扩展元素时基本上是“伪造的” – 它实际上并不是浮动的，它只是利用其边距与固定宽度的浮动元素一起玩。
问题就是这样：扩展元素不会浮动。 如果你试图在扩展元素中有任何嵌套的浮动，那么这些“嵌套”的浮动元素根本就没有嵌套。 当你试图坚持一个clear: both; 在你的“嵌套”浮动项目下，你最终将清除顶级浮动。
然后，要使用Boushley的解决scheme，我想补充说，你应该放置一个div如下：.fakeFloat {height：100％; 宽度：100％; float：left; }并将其直接放置在展开的div中; 所有展开的div的内容都应该在这个fakeFloat元素中。
出于这个原因，我build议在这个特定情况下使用表格。 浮动元素实际上并不是用来做你想要的扩展，而使用表的解决scheme是微不足道的。 一般认为浮动更适合于布局，而不是表格……但是你不是在这里使用浮动，而是在伪造它 – 这种方式打破了这个特定情况下文体论争的目的，我卑微的意见。
使用display:flex
<div style="width:500px; display:flex"> <div style="width:150px; height:30px; background:red">fixed width</div> <div style="width:100%; height:30px; background:green">remaining</div> </div>
我尝试了上面的解决scheme，留下一个液体，固定的权利，但没有工作（我知道问题是相反的，但我认为这是相关的）。 这是什么工作：
.wrapper {margin-right:150px;} .wrapper .left {float:left; width:100%; margin-right:-150px;} .right {float:right; width:150px;} <div class="wrapper"><div class="left"></div></div> <div class="right"></div>
我有一个类似的问题，我发现这里的解决scheme： https : //stackoverflow.com/a/16909141/3934886
解决scheme是为固定的中心格和液体侧柱。
.center{ background:#ddd; width: 500px; float:left; } .left{ background:#999; width: calc(50% - 250px); float:left; } .right{ background:#999; width: calc(50% - 250px); float:right; }
如果你想要一个固定的左列，只需改变公式。
如果您试图在2个项目之间填充Flexbox中的剩余空间，请将以下类添加到您要分隔的2之间的空白div：
.fill { // This fills the remaining space, by using flexbox. flex: 1 1 auto; }
试过所有这些答案，他们都没有工作（米海几乎做到了，所以+1，但我需要一个更大的内在因素，所以它打破了）。
最好的解决scheme（截至这个答案的date）仍然是：使用jQuery在运行时设置您的div宽度，使用固定宽度div大小的预设常量。 你会为自己节省很多头痛。
/ * * css * /
#search { position: absolute; width: 100px; } .right-wrapper { display: table; width: 100%; padding-left:100px; } .right-wrapper #navigation { display: table-cell; background-color: #A53030; }
/ * * html * /
<div id="search"></div> <div class="right-wrapper"> <div id="navigation"></div> </div>
我有一个非常简单的解决scheme！ // HTML
<div> <div id="left"> left </div> <div id="right"> right </div>
// CSS
#left { float:left; width:50%; position:relative; background-color:red; } #right { position:relative; background-color:#00FF00;}
链接： http : //jsfiddle.net/MHeqG/
我有类似的问题，并提出以下运作良好
CSS：
.top { width: auto; height: 100px; background-color: black; border: solid 2px purple; overflow: hidden; } .left { float:left; width:100px; background-color:#ff0000; padding: 10px; border: solid 2px black; } .right { width: auto; background-color:#00FF00; padding: 10px; border: solid 2px orange; overflow: hidden; } .content { margin: auto; width: 300px; min-height: 300px; padding: 10px; border: dotted 2px gray; }
HTML：
<div class=top>top </div> <div> <div class="left">left </div> <div class="right"> <div class="content">right </div> </div> </div>
当窗口缩小时，此方法不会换行，而是自动扩展“内容”区域。 它将保持站点菜单的静态宽度（左）。
并为自动扩展内容框和左侧竖框（站点菜单）演示：
尝试添加relative位置，删除右侧的width和float属性，然后添加0值的left和right属性。
此外，您可以添加margin left规则，该值基于左侧元素的宽度（如果您需要空间 ，则加上一些像素）以保持其位置。
这个例子正在为我工作：
#search { width: 160px; height: 25px; float: left; background-color: #FFF; } #navigation { display: block; position: relative; left: 0; right: 0; margin: 0 0 0 166px; background-color: #A53030; }
.container { width:100%; display:table; vertical-align:middle; } .left { width:100%; display:table-cell; text-align:center; } .right { width:40px; height:40px; display:table-cell; float:right; }
<div class="container"> <div class="left">Left</div> <div class="right">Right</div> </div
我想知道没有人使用position: absolute position: relative
所以，另一个解决scheme是：
HTML
<header> <div id="left"><input type="text"></div> <div id="right">Menu1 Menu2 Menu3</div> </header>
CSS
header { position: relative; } #left { width: 160px; height: 25px; } #right { position: absolute; top: 0px; left: 160px; right: 0px; height: 25px; }
Jsfiddle的例子
新来的CSS。 但是我通过使用内联块来解决这个问题。 检查了这一点： http : //learnlayout.com/inline-block.html
我遇到了这个相同的问题，试图布局一些jqueryUI控件。 虽然现在的共同理念是“使用DIV而不是TABLE ”，我发现在我的情况下使用TABLE效果更好。 特别是，如果您需要在两个元素之间进行简单的alignment（例如，垂直居中，水平居中等），TABLE提供的选项可以为此提供简单直观的控制。
这是我的解决scheme：
<html> <head> <title>Sample solution for fixed left, variable right layout</title> <style type="text/css"> #controls { width: 100%; } #RightSide { background-color:green; } </style> </head> <body> <div id="controls"> <table border="0" cellspacing="2" cellpadding="0"> <TR> <TD> <button> FixedWidth </button> </TD> <TD width="99%" ALIGN="CENTER"> <div id="RightSide">Right</div> </TD> </TR> </table> </div> </body> </html>
