DIV高度怎样充满容器？

发布于
2016-10-12

代码：
<!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?
前段新手，感谢~

html css

阅读 9.8k

9 个回答

杜草原

✓ 已被采纳

在浏览器环境支持的情况下，暂时想到可以有几种处理方式：

1、使用box-sizing和padding控制高度并用负margin调整位置
html,body {height:100%;}
header {height: 20px; position: relative;}
section {height: 100%; box-sizing: border-box; padding-top: 20px; margin-top: -20px;}

2、使用calc
html,body {height:100%;}
header {height: 20px;}
section {height: calc(100% - 20px);}

3、使用flex
html, body{height: 100%;}
body {display: flex; flex-direction: column;}
header {flex-grow: 0; flex-shrink: 0; flex-basis: 20px;}
section {flex: 1;}

沧海一粟灬

26941524

发布于
2016-10-12

更新于
2016-10-12

section {
    height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    margin-top: -20px;
}

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

header {
    height: 20px;
    position: relative;
    z-index: 2;
}

青叶

1.5k1211

发布于
2016-10-12

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

<!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 {
                border:1px solid #000;
                height: 20px;
            }
            section {
                border:1px solid #000;
            }
        </style>
    </head>
    <body id="body">
        <header id="header"></header>
        <section id="section"></section>
        <script>
            window.onload = function() {
                var bh = document.getElementById('body').offsetHeight;
                var hh = document.getElementById('header').offsetHeight;
                var sh = bh-hh;
                document.getElementById('section').style.height=sh+'px';
                //console.log(bh);
                //console.log(hh);
                //console.log(sh);
            }
        </script>
    </body>
</html>

木槿

34052030

发布于
2016-10-12

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

<!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;
                background: red;
            }
            section {
                height: auto;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <header></header>
        <section></section>
         <script type="text/javascript">
            var secHeight = document.documentElement.clientHeight - 20;
            document.getElementsByTagName('section')[0].style.height = secHeight+'px';
        </script>     
    </body>
</html>

hzfhhh

701

发布于
2016-10-12

height: 100%;

undefind_5

1.5k1298133

发布于
2016-10-12

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

已注销

3.6k83856

发布于
2016-10-12

更新于
2016-10-12

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <header id="header"></header>
    <section id='part-1'></section>
</body>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body,html {
    height: 100%;
    overflow: hidden;
    /*内容没超出section时隐藏滚动条*/
}

#header {
    height: 20px;
    background: #f55;
    }

#part-1 {
    height: 100%;
    background: #1abc9c;
    overflow-y: scroll;
     /*内容超出section时自由滚动*/
}
</style>

</html>

maroonstar

283

发布于
2016-10-13

手机端页面结构吧？目前主流的UI框架都是用的绝对定位，兼容性很好

body {
  position: relative;
  overflow:hidden;
}
header {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  height: 20px;
}
section {
  position: absolute;
  top: 20px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
  height: auto;
}

bellezhu

7521627

发布于
2016-10-13

更新于
2016-10-13

$(function(){

var a=$(window).height();
$("section").height(a-20);

})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

DIV高度怎样充满容器？

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？