我想创建3个div,使整个页面的大小与窗口大小相同(即页面不应滚动),每个div的高度应为整个高度的百分之几. 例如 |----------------------------------
... . . 我想创建3个div,使整个页面的大小与窗口大小相同(即页面不应滚动),每个div的高度应为整个高度的百分之几.
例如
|--------------------------------------|| Body height=window's height || |----------------------------------| || | Header height:10% | || |----------------------------------| || | | || | Content height:85% | || | | || | | || |----------------------------------| || | Footer height:5 % | || |----------------------------------| ||--------------------------------------|
这是我使用的代码没有任何成功
<body style="width: 100%; height:100%"><div style="width: 100%; height:100%;"> <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000"> <!-- some content --> </div> <div style="width: 100%; height:85%;" > <!-- some content --> </div> <div style="width: 100%; height:5%" > <!-- some content --> </div></div></body>.
解决方法
. 你需要这样的东西吗？
Demo
html,body { height: 100%;}div:nth-of-type(1) { background: #f00; height: 20%;}div:nth-of-type(2) { background: #00f; height: 70%;}div:nth-of-type(3) { background: #0f0; height: 10%;} 我猜your solution will also work,但你一定错过了重置默认的浏览器样式,在CSS中使用它并且你错过了设置高度：100％;对于html元素也是如此
* { margin: 0; padding: 0;}. . .. ...
