How can I stretch a div to 100% page height?

2019-03-16 20:34发布

站内问答 / HTML/CSS
680 10 5 

<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

How can I stretch div to 100% height of page?

标签： css height
举报
10条回答
放荡不羁爱自由
2楼-- · 2019-03-16 21:05

If you want to do it via JavaScript this code should work for most DOM browsers...

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-03-16 21:05 
html {
    height: 100%;
}

This will not work if you have a DOCTYPE. I'm looking for an answer too, but I have a DOCTYPE. However, there is a way to do it with a DOCTYPE, but it doesn't work with two divs floating left and right next to eachother, try:

(div-name) {
    position: absolute;
}

Be aware that this doesn't look good at all when using two divs floating next to eachother. But, it works fine for any other type.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
4楼-- · 2019-03-16 21:06

This will work, as an example.

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-03-16 21:23

Try (it should work in most browsers):

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
6楼-- · 2019-03-16 21:24

Use:

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

This way, it will be centered and cover the page if it is longer than one browser view long.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2019-03-16 21:25

You should set 100% height for the body and it should do:

body {
...
height:100%;
...
}
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)