为什么我的孩子 div 超出了父 div？答案

【问题标题】：why is my child div going outside of parent div?为什么我的孩子 div 超出了父 div？
【发布时间】：2015-12-09 07:56:00
【问题描述】：

我想要一个父 div，我可以在其中创建一些子 div，这些子 div 应该适合专利 div 并且不应该超出父 div

如何创建一个父 div，其中所有子 div 都具有相同的高度并且它们不应该超出它

这是我的 HTML 和 CSS

<html>
    <head>
        <style>

            html,
            body {
	    	padding: 20px;
	    }

	    #parent {
		    display: block;
		    height: 100%;
		    width: 100%;
		    background: #ccc;
	    }

	    #child1 {
		    display: block;
		    height: 10%;
		    width: 100%;
		    background: #333;
	    }

	    #child2 {
		    display: block;
		    height: 100%;
		    width: 25%;
		    background: #456;
	    }
	</style>
    </head>
    <body>
	    <div id="parent">
		    <div id="child1"></div>
		    <div id="child2"></div>
	    </div>
    </body>
</html>

【问题讨论】：

这是你的意思吗？ codepen

标签： html css layout

【解决方案1】：

给child1添加float:left样式

 <div id="parent">

        <div id="child1" style="float:left"></div>
        <div id="child2"></div>

    </div>

【讨论】：

它有效，但随后 child1 与 child2 重叠

【解决方案2】：

child 1 有 10% 的高度，所以 child2 应该有 90% 的剩余高度所以改变child2的高度

#child2
    {
        display: block;
        height: 90%;
        width: 25%;
        background: #456;
    }

【讨论】：

随时为您提供帮助 :)