DIV高度怎样充满容器？

2016-10-12 16:46发布

站内问答 /
3923 5 6 
代码： <!DOCTYPE html> <html lang="en">     <head>         <meta charset="utf-8">         <meta name="Author" content="">         <meta name="Keywords" content="">         <meta name="Description" content="">         <title></title>                 <style type="text/css">             html {                 height: 100%;                  margin: 0;                  padding: 0;             }             body {                 height: 100%;                  margin: 0;                  padding: 0;             }             header {                 height: 20px;             }             section {                 height: ?; //code here             }         </style>     </head>     <body>         <header></header>         <section></section>                 </body> </html>

在header元素用px定义高度时，怎样使section元素和header 元素高度正好充满容器body?
前段新手，感谢~

友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
5条回答
gustar - 这个人很懒，什么都没留下
1楼-- · 2016-10-12 17:32

纯CSS目前我还没有想到怎么实现，不过用javascript可以实现，思路是获取body的高度，然后把body的高度减去20得到section的高度，最后用js设置section的高度。

恰逢花开 - 这个人很懒，什么都没留下
2楼-- · 2016-10-12 17:37

这样可以。
刚才有人提醒会覆盖，确实如此。但是可以把header这样设置

Battle field - 这个人很懒，什么都没留下
3楼-- · 2016-10-12 17:38

height: 100%;

田鼠 - 这个人很懒，什么都没留下
4楼-- · 2016-10-12 17:34

可以直接给section加height:100%;同时postion:fixed；才有效果，但是这种情况下，body和html的高度任然是被header元素撑高的，即高度任然为20px。所以说其实质上还是无法达到你所要求的那样“高度正好充满容器body”，只是看上去像是被撑满的。也许还有其他办法，看看其他牛人如何解决

田鼠 - 这个人很懒，什么都没留下
5楼-- · 2016-10-12 17:37

配合Js可以实现，具体请看下面代码：

一周热门 更多>