我需要你的帮助,
如何修改下面的现有代码,以便液化我的 css 框的高度(因为它需要以这种方式调整到我的用户屏幕分辨率的高度)?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin:0; padding: 0 }
#container {
width: 100%;
margin: 0 auto;
}
#primary {
float: left;
width: 10%;
background: red;
height: 600px;
}
#content {
float: left;
width: 80%;
background: blue;
height: 600px;
}
#secondary {
float: left;
width: 10%;
background: green;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
<div id="primary">
<p>left</p>
</div>
<div id="content">
<p>center</p>
</div>
<div id="secondary">
<p>right</p>
</div>
</div>
</body>
</html>
最佳答案
使用 table* 显示属性可以轻松实现等高列。
http://cssdeck.com/labs/2iy6anjy
#container {
display: table;
width: 100%;
margin: 0 auto;
}
#primary {
display: table-cell;
width: 10%;
background: red;
}
#content {
display: table-cell;
width: 80%;
background: blue;
}
#secondary {
display: table-cell;
width: 10%;
background: green;
}
关于css - 使我的 css 框的高度液化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16987373/