如何拥有一个固定高度的标题，其内容 div 占据 100% 的剩余空间？

发布于 2024-10-06 15:50:11 字数 347 浏览 2 评论 0原文

在开始之前，我知道这里有很多与此相关的问题，但我觉得严重缺乏答案。它们至少对我来说没有意义，或者说它们没有实现我想要的。如果你知道这个重复的问题有一个可靠的解决方案，我只是错过了；我会把这个删掉。

如果我有以下 HTML...

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

简单来说，如何使标题占据视口高度的 50px 并使内容部分填充视口高度的其余部分而不使用滚动条？理想情况下，这可以在 IE6 中运行并且无需表格。谢谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妥活 2024-10-13 15:50:11

这似乎对我有用：

<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>

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>

回复收藏 0 原文

风筝在阴天搁浅。 2024-10-13 15:50:11

不确定这是否是您所需要的，但它会导致 #content 占据所有视口，并且 #header 包含在其中，然后您想要放入 #content 中的任何内容都会出现在 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>

高度：自动！重要；高度：100%； bit 适用于 IE 6，您最好不要在针对 IE 6 的样式表中仅使用 IE 条件注释。

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.

回复收藏 0 原文

~没有更多了~