有疑问？？？？？？
来源：5-1 CSS其他选择器（上）
慕后端1209861
2018-08-01 14:50:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两行三列布局</title>
<style type="text/css">
header, body {
margin: 0px;
}
header {
background-color: lightblue;
height: 150px;
}
#container {
background-color: lightgray;
height: 450px;
}
nav {
background-color: lightgreen;
height: 100%;
}
aside {
background-color: lightcoral;
height: 100%;
}
article {
background-color: lightyellow;
height: 100%;
}
</style>
</head>
<body>
<header></header>
<div id="container">
<nav></nav>
<aside></aside>
<article></article>
</div>
</body>
</html><nav>、<aside>和<article>三个标签都是在<div>标签中，且已经设定div的高度为450px，为什么最后div的高度被撑到1350px呢？里面三个标签不应该平分450px的高度吗？
写回答
1回答
-
你将<nav>、<aside>和<article>这三个标签的高度设置为100%也就是说这三个标签继承了div的100%高度，也就是450px；所以每个标签都是450px，这样就将div的高度撑到了1350px了，你可以将三个标签的高度设置为33.3%，这样就可以平分450px了，如下所示，在你代码的基础上做了一些调整。如果我的建议解决了你的问题，请采纳，祝学习愉快~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两行三列布局</title> <style type="text/css"> header, body { margin: 0px; } header { background-color: lightblue; height: 150px; } #container { background-color: lightgray; height: 450px; } nav { background-color: lightgreen; height: 33.3%; } aside { background-color: lightcoral; height: 33.3%; } article { background-color: lightyellow; height: 33.3%; } </style> </head> <body> <header></header> <div id="container"> <nav></nav> <aside></aside> <article></article> </div> </body> </html>0
相似问题