How do I have a fixed height header with a content div that takes up 100% of the remaining space?_问答_开发者

How do I have a fixed height header with a content div that takes up 100% of the remaining space?

开发者 https://www.devze.com 2023-01-28 23:27 出处：网络

Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking.They at least aren\'t making sense to me, or they don\'t accomplish what

相关专题：css height

Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.

If I have the following HTML...

<body>
    <div id="header"></div>
    <div id="content"></div>
</body>

How, in开发者_如何学运维 simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!

this seems to work for me:

<html>
    <body>
        <div style="height:60px; position:fixed; width:100%;"></div>
        <div style="height:100%; width:100%;">
            <p style="padding-top:60px;">hola</p>
        </div>
    </body>
</html>

Not sure if this is what you need but it will result in #content taking up all the viewport and #header is contained within that, then any content you wanted to put in #content will appear after header.

<html>

<head>
  <title>Test</title>
  <style type="text/css">
    body,
    html {
      height: 100%;
    }
    
    body {
      margin: 0;
      padding: 0;
    }
    
    #header {
      height: 50px;
      background: green;
      width: 100%;
    }
    
    #content {
      background: blue;
      position: relative;
      min-height: 100%;
      height: auto !important;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="content">
    <div id="header">I am the header</div>
    <p>first bit of content</p>
  </div>
</body>

</html>

height:auto !important; height:100%; bit is for IE 6, you'd ideally do than in a style sheet directed at IE 6 only using IE condition comments.