我知道这是一个常见问题,我查找了一些解决方案,但找不到我想要的东西。
我想转换this http://pastehtml.com/view/av6fb8bir.html到无表布局。
注意:页眉和页脚必须设置为固定高度(以像素为单位)(50px 即可)。
我遇到的主要问题是我无法让中间的“大盒子”表现得像用表格完成时一样。有一些解决方案适用于可变长度的内容(文本、图像),但我希望这个盒子的外观和行为像一个盒子——有边框、圆角等等。
您可以使用表格样式 CSS 属性来完成此操作,但仍然保留无表格标记(这仍然是一个胜利)。
Example
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
jsFiddle http://jsfiddle.net/alexdickson/wGHte/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)