Html 如何使子 div 始终适合父 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1098219/
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 child divs always fit inside parent div?
提问by Tim Sheiner
My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?
我的问题是，当您事先无法知道父 div 的大小时，是否有一种方法可以在不使用 JavaScript 的情况下使子 div 扩展到其父级的边界，而不会超出这些边界？
Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that #twoand #threeboth extend outside their parent, #one, and cause scrollbars to appear.
下面是展示我的问题的示例标记/样式。如果您将它加载到浏览器中，您将看到它#two并且#three都扩展到它们的父级之外#one，并导致滚动条出现。
My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.
我的问题不在于滚动条，而是我不知道如何告诉子 div 占据剩余的宽度或高度，而不是父级的完整高度或宽度。
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
回答by meem
I had a similar problem, but in my case, I have content in my div that height-wise will exceed the boundaries of the parent div. When it does, I want it to auto-scroll. I was able to accomplish this by using
我有一个类似的问题，但就我而言，我的 div 中有内容，高度将超过父 div 的边界。当它发生时，我希望它自动滚动。我能够通过使用来完成这个
.vscrolling_container { height: 100%; overflow: auto; }
回答by a b
you could use display: inline-block;
你可以用 display: inline-block;
hope it is useful.
希望它有用。
回答by ajm
In your example, you can't: the 5px marginis added to the bounding box of div#twoand div#threeeffectively making their width and height 100% of parent + 5px, which will overflow.
在您的示例中，您不能：5px margin被添加到的边界框div#two并div#three有效地使它们的宽度和高度为父级的 100% + 5px，这将溢出。
You can use paddingon the parent Element to ensure there's 5pxof space inside its border:
您可以padding在父元素上使用以确保5px其边框内有空间：
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
EDIT: In testing, removing the width:100%from div#twowill actually let it work properly as divs are block-level and will always fill their parents' widths by default. That should clear your first case if you'd like to use margin.
编辑：在测试中，删除width:100%fromdiv#two实际上会让它正常工作，因为divs 是块级的，并且默认情况下将始终填充其父级的宽度。如果您想使用保证金，那应该清除您的第一个案例。
回答by Ryan
There are two techniques commonly used for this:
有两种常用的技术：
- Absolute Positioning
- Table Styles
- 绝对定位
- 表格样式
Given the HTML you provided here is the solution using Absolute positioning:
鉴于您在此处提供的 HTML 是使用绝对定位的解决方案：
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</bodyYou can always just use the table, tr, and td elements directly despite common criticisms as it will get the job done. If you prefer to use CSS there is no equivalent for colspan so you will likely end up with nested tables. Here is an example:
尽管有普遍的批评，但您始终可以直接使用 table、tr 和 td 元素，因为它可以完成工作。如果您更喜欢使用 CSS，则 colspan 没有等效项，因此您最终可能会得到嵌套表。下面是一个例子：
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>回答by Matt Bridges
For width it's easy, simply remove the width: 100%rule. By default, the divwill stretch to fit the parent container.
对于宽度很容易，只需删除width: 100%规则即可。默认情况下，div将拉伸以适合父容器。
Height is not quite so simple. You could do something like the equal height column trick.
身高并不是那么简单。你可以做一些类似等高列技巧的事情。
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
回答by Tim Sheiner
For closure, I think the answer to this question is that there is no solution. The only way to get the behavior I want is with javascript.
对于封闭，我认为这个问题的答案是没有解决方案。获得我想要的行为的唯一方法是使用 javascript。
回答by Jiabei Luo
Make sure the outermost div has the following CSS properties:
确保最外面的 div 具有以下 CSS 属性：
.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}
回答by Olly Hodgson
If I've understood you correctly, the easiest method is to float the children. For example:
如果我理解正确的话，最简单的方法是让孩子漂浮。例如：
#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }
Setting a dimension (height/width) and overflow to auto or hidden on the parent element causes it to contain any floated child elements.
在父元素上将维度（高度/宽度）和溢出设置为 auto 或 hidden 会导致它包含任何浮动的子元素。
Note that overflow:hidden; can occasionally cause problems with content getting cut off, in which case you might want to try this alternative method:
注意溢出：隐藏；偶尔会导致内容被切断的问题，在这种情况下，您可能想尝试以下替代方法：
回答by Silfverstrom
you could use inherit
你可以使用继承
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
回答by ShadyThGod
I think I have the solution to your question, assuming you can use flexbox in your project. What you want to do is make #onea flexbox using display: flexand use flex-direction: columnto make it a column alignment.
我想我有你的问题的解决方案，假设你可以在你的项目中使用 flexbox。您想要做的是#one使用display: flex和使用flex-direction: column使其成为列对齐方式的 flexbox 。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.border {
border: 1px solid black;
}
.margin {
margin: 5px;
}
#one {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#two {
height: 50px;
}
#three {
width: 100px;
height: 100%;
}<html>
<head>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>