div height:100% until content gets taller than browser height?_问答_开发者

div height:100% until content gets taller than browser height?

开发者 https://www.devze.com 2023-01-09 08:00 出处：网络

Is there a way to instruct a div to fill 100% of the available page height, until it gets enough content to require a scrollbar?:

相关专题：css

Is there a way to instruct a div to fill 100% of the available page height, until it gets enough content to require a scrollbar?:

// browser height: 600px:

<div>
    // empty, so just be 600px tall.
</div>

....

// when it gets content and gets taller than
// the page, don't need to auto-height itself
// anymore.
<div>
  <ul>
    <li></li>
    <li></li>
    ...
  </ul>
</div开发者_如何学C>

is there any sort of style that can make that happen, or does this need to be done with javascript?

Thanks

Have a look at min-height. Not supported in older versions of IE, but should do what you want. http://www.w3schools.com/CSS/pr_dim_min-height.asp

This is hands down the easiest way to do what you're looking for:

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <title>Demo</title>
   <style type="text/css" media="screen">
      #content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: auto; }
   </style>
</head>
<body>
   <div id="content">
      <p>Embed all your content here.</p>
   </div>
</body>
</html>

Alternatively if you want to support older browsers you could do this instead:

#content { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; width: 100%; }

<!doctype html> 
<html> 
    <head> 
    <style> 
        * {
        margin:0;
        padding:0;
        }

        html, body {
        height:100%;
        }

        div#page {
        background:#333;
        min-height:100%;
        text-align:center;
        }
    </style> 
    </head> 
    <body> 
    <div id="page"></div> 
    </body> 
</html>

Feed height:100% to IE6 if you care about it in a conditional.

in your CSS, do you have html, body set to {height: 100%}