Html 如何使 div 填充剩余的水平空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1032914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div fill a remaining horizontal space?
提问by alexchenco
I have 2 divs:one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.
我有 2 个 div：一个在页面的左侧，一个在页面的右侧。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>采纳答案by Boushley
This seems to accomplish what you're going for.
这似乎完成了你想要的。
#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>回答by Hank
The problem that I found with Boushley's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of 'solutions' I found a tutorial (now link is dead) on creating three column pages.
我在 Boushley 的回答中发现的问题是，如果右列比左列长，它只会环绕左侧并继续填充整个空间。这不是我正在寻找的行为。在搜索了很多“解决方案”之后，我找到了一个关于创建三列页面的教程（现在链接已失效）。
The author offer's three different ways, one fixed width, one with three variable columns and one with fixed outer columns and a variable width middle. Much more elegant and effective than other examples I found. Significantly improved my understanding of CSS layout.
作者提供了三种不同的方式，一种固定宽度，一种带有三个可变列，一种是固定外列和可变宽度中间。比我发现的其他例子更优雅和有效。显着提高了我对 CSS 布局的理解。
Basically, in the simple case above, float the first column left and give it a fixed width. Then give the column on the right a left-margin that is a little wider than the first column. That's it. Done. Ala Boushley's code:
基本上，在上面的简单情况下，将第一列向左浮动并给它一个固定的宽度。然后给右边的列一个比第一列宽一点的左边距。就是这样。完毕。Ala Boushley 的代码：
Here's a demo in Stack Snippets& jsFiddle
这是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>With Boushley's example the left column holds the other column to the right. As soon as the left column ends the right begins filling the whole space again. Here the right column simply aligns further into the page and the left column occupies it's big fat margin. No flow interactions needed.
在 Boushley 的示例中，左列包含右侧的另一列。一旦左列结束，右列再次开始填充整个空间。这里右列只是进一步对齐到页面中，而左列占据了很大的空白。无需流动交互。
回答by Mihai Frentiu
The solution comes from the display property.
解决方案来自 display 属性。
Basically you need to make the two divs act like table cells. So instead of using float:left, you'll have to use display:table-cellon both divs, and for the dynamic width div you need to set width:auto;also. The both divs should be placed into a 100% width container with the display:tableproperty.
基本上你需要让两个 div 像表格单元格一样工作。因此float:left，您必须display:table-cell在两个 div 上使用，而不是使用，并且对于动态宽度 div，您还需要设置width:auto;。两个 div 都应放置在具有 100% 宽度的容器中display:table。
Here is the css:
这是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;}
And the HTML:
和 HTML：
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANT:For Internet Explorer you need to specify the float property on the dynamic width div, otherwise the space will not be filled.
重要提示：对于 Internet Explorer，您需要在动态宽度 div 上指定 float 属性，否则将不会填充空间。
I hope that this will solve your problem. If you want, you can read the full article I wrote about this on my blog.
我希望这能解决你的问题。如果你愿意，你可以阅读我在我的博客上写的关于这个的完整文章。
回答by Jordan
These days, you should use the flexboxmethod (may be adapted to all browsers with a browser prefix).
这些天，您应该使用该flexbox方法（可能适用于所有带有浏览器前缀的浏览器）。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
更多信息：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by mystrdat
Since this is a rather popular question, I'm inclined to share a nice solution using BFC.
Codepen sample of the following here.
由于这是一个相当受欢迎的问题，我倾向于使用 BFC 分享一个很好的解决方案。
下面的Codepen样品在这里。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
In this case, overflow: autotriggers context behavior and makes the right element expand onlyto the available remaining width and it will naturally expand to full width if .leftdisappears. A highly useful and clean trick for many UI layouts, but perhaps hard to understand the "why it works" at first.
在这种情况下，overflow: auto触发上下文行为并使正确的元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽。对于许多 UI 布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“它为什么起作用”。
回答by Marcos B.
If you don't need compatibility with older versions of certain browsers (IE 108 or less for example) you can use the calc()CSS function:
如果您不需要与某些浏览器的旧版本兼容（例如IE 108 或更低版本），您可以使用calc()CSS 函数：
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
回答by Denzel
@Boushley's answer was the closest, however there is one problem not addressed that has been pointed out. The rightdiv takes the entire width of the browser; the content takes the expected width. To see this problem better:
@Boushley 的答案是最接近的，但是已经指出了一个未解决的问题。的右格取浏览器的整个宽度; 内容采用预期的宽度。为了更好地看到这个问题：
<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>
The content is in the correct place (in Firefox), however, the width incorrect. When child elements start inheriting width (e.g. the table with width: 100%) they are given a width equal to that of the browser causing them to overflow off the right of the page and create a horizontal scrollbar (in Firefox) or not float and be pushed down (in chrome).
内容位于正确的位置（在 Firefox 中），但是宽度不正确。当子元素开始继承宽度（例如带有 的表格width: 100%）时，它们的宽度等于浏览器的宽度，导致它们从页面右侧溢出并创建水平滚动条（在 Firefox 中）或不浮动并被向下推（在铬）。
You can fix thiseasily by adding overflow: hiddento the right column. This gives you the correct width for both the content and the div. Furthermore, the table will receive the correct width and fill the remaining width available.
您可以通过添加到右列轻松解决此问题overflow: hidden。这为您提供了正确的内容和 div 宽度。此外，表格将获得正确的宽度并填充剩余的可用宽度。
I tried some of the other solutions above, they didn't work fully with certain edge cases and were just too convoluted to warrant fixing them. This works and it's simple.
我尝试了上面的一些其他解决方案，它们在某些边缘情况下不能完全工作，而且太复杂了，无法保证修复它们。这很有效，而且很简单。
If there are any problems or concerns, feel free to raise them.
如果有任何问题或疑虑，请随时提出。
回答by Dariusz Sikorski
Here is a little fix for accepted solution, which prevents right column from falling under the left column. Replaced width: 100%;with overflow: hidden;a tricky solution, if somebody didn't know it.
这是已接受的解决方案的一个小修复，它可以防止右列落在左列之下。更换width: 100%;用overflow: hidden;一个棘手的解决方案，如果有人不知道它。
<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/2600/
[edit] Also check an example for three column layout: http://jsfiddle.net/MHeqG/3148/
[编辑] 还要检查三列布局的示例：http: //jsfiddle.net/MHeqG/3148/
回答by Helzgate
If you are trying to fill remaining space in a flexbox between 2 items, add the following class to a an empty div between the 2 you want to seperate:
如果您尝试填充 flexbox 中 2 个项目之间的剩余空间，请将以下类添加到您要分隔的 2 个项目之间的空 div 中：
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
回答by Ildar Zaripov
Use display:flex
用 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>
