如何让子div始终适合父div？ [英] How to make child divs always fit inside parent div?
问题描述
我的问题是，如果没有使用JavaScript，有什么方法可以让子div扩展到父级的边界，而不会超出这些边界，而事先不知道父级div的大小？
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?
以下是示例标记/样式，展示了我的问题。如果你将它加载到浏览器中，你会看到 #two 和 #three 都扩展到它们的父代之外， #one ，并导致滚动条出现。
Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that #two and #three both extend outside their parent, #one, and cause scrollbars to appear.
我的问题不是滚动条，而是我不知道如何告诉子div占用剩余的宽度或高度，而不是满足父母的身高或宽度。
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.
<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>
推荐答案
我有类似的问题，我有我的div内容，高度明智将超出父div的界限。当它的时候，我想让它自动滚动。我可以通过使用
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
.vscrolling_container { height: 100%; overflow: auto; }
这篇关于如何让子div始终适合父div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
