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

2019-03-16 20:34发布

站内问答 / HTML/CSS
681 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:27

Applying

html, body, .100PercentHeight{
    height:100%;
}

should yield the effect you're looking for. You need it on all three.

However, it often doesn't actually do what you think it might, and can be problematic. Faux-column techniques or "sticky footers" tend to work better.

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
3楼-- · 2019-03-16 21:29

This should work:

<style type="text/css">
    html, body, .100PercentHeight {
        height: 100%;
        margin: -10px 0px 0px -10px;
    }
</style>

However, you may want to add a background colour or border to make sure it works, else you won't be able to see it properly.

查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2019-03-16 21:31 
<style>
.100PercentHeight{margin:0; height:100%}

</style>
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
5楼-- · 2019-03-16 21:32

Here is the simplest solution that I know of. Unfortunately, however, it doesn't work in Internet Explorer 8 and older, as they do not support the vh (viewport height) unit.

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)