css - For div to extend full height

Question

Welcome To Ask or Share your Answers For Others

css - For div to extend full height

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - For div to extend full height

Is there a method I can use for a div to extend to full height? I've got a sticky footer in it as well.

Here's the web page: Website removed. The middle bit I'm talking about is the white div, midcontent which has CSS values:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

So yes, obviously height:100% didn't work. Additionally, ALL parent containers have height set.

Here's the general structure

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:06:56+0000

Did you remember setting the height of the html and body tags in your CSS? This is generally how I've gotten DIVs to extend to full height:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Categories

css - For div to extend full height

css - For div to extend full height

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags