发表新帖
发表新帖

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

前端 未结
关注
10 1275
一生所求
一生所求 2021-02-06 17:56 

    
        

        

    
        


        

                      

              相关标签:
10条回答
  • 伪装坚强ぢ
    2021-02-06 18:32

    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)
  • 南旧
    2021-02-06 18:32

    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)
  • 半阙折子戏
    2021-02-06 18:33 
    <style>
.100PercentHeight{margin:0; height:100%}

</style>
    0 讨论(0)
  • 旧时难觅i
    2021-02-06 18:38 
    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)
  • 自闭症患者
    2021-02-06 18:39

    This will work, as an example.

    <div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>
    0 讨论(0)
  • 被撕碎了的回忆
    2021-02-06 18:41

    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)
 看不清?
提交回复
热议问题