这是我从 codepen 中获取的代码:http://codepen.io/rags4developer/pen/ONoBpm
请帮我解决这些问题。
- 如何防止主 div 和页脚溢出容器 div？ overflow: hidden for container 并不总是有效!
- 如何在不将其高度设置为固定百分比的情况下使容器 div 高度等于页面高度？
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
最佳答案
我不确定我是否理解正确，但你的高度(即 #container div 内的高度)加起来为 15% + 100% + 页脚的高度 = at #container 高度的至少 115% 加上页脚高度，这会导致“溢出”。
我将 #content 高度更改为 80% 并将 height: 5%; 添加到代码笔的这个分支中的页脚: http://codepen.io/anon/pen/EKeOdm
现在一切都保留在 #container 中。这是你想要的吗？
关于html - 如何防止我的 div 溢出其父容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36876248/