我想创建这样的布局:
- 左栏(黄色):宽度 150px constant - height dynamic
- 中间列(天蓝色):宽度dynamic - 高度dynamic
- 右栏(绿色):宽度 150px constant - height dynamic
- 页脚(红色):宽度动态 - 高度恒定
我正在寻找纯 CSS 解决方案。
最佳答案
http://fiddle.jshell.net/2bSaP/show/
HTML:
<div id="container">
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
</div>
CSS:
body {
margin: 0;
}
#yellow {
background: yellow;
position: absolute;
width: 150px;
top: 0;
left: 0;
bottom: 155px;
}
#blue {
background: rgb(98, 196, 255);
position: absolute;
top: 0;
right: 155px;
left: 155px;
bottom: 155px;
}
#green {
background: green;
position: absolute;
width: 150px;
top: 0;
right: 0;
bottom: 155px;
}
#red {
background: brown;
position: absolute;
height: 150px;
left: 0;
right: 0;
bottom: 0;
}
关于html - 如何仅通过CSS制作动态布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11356283/