CSS - 最小高度为 100% 的内容创建垂直滚动条

发布于 2024-12-26 19:32:50 字数 1315 浏览 1 评论 0 原文

我正在尝试创建一个带有标题的页面，其中包含导航菜单和填充页面其余部分的内容区域，内容的最小高度为 100%，但即使它是空的，由于标题的原因，它也会显示垂直滚动条尺寸。

HTML 相关部分：

<body>
  <div id="header">Davi Andrade</div>
  <nav>
    <ul>
      <li><a href="/">About</a></li>
      <li><a href="/">Portfolio</a></li>
      <li><a href="/">Downloads</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </nav>
  <div id="content">
    Text
  </div>
</body>

和 CSS：

html, body {
  background: #333333;
  font-family: "Segoe UI", "Lucida Grande", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  color: #b6b6b6;
  float: left;
  font-family: Megrim;
  font-size: 36px;
  margin: 18px 52px 18px 52px;
  text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

nav li a {
  color: white;
  display: block;
  float: right;
  font-size: 1.3em;
  list-style: none;
  padding: 24px 48px 24px 0;
  text-decoration: none;
}

#content {
  clear: both;
  background: #3e3e3e;
  box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
  min-height: 100%;
}

有什么方法可以解决这个问题吗？

原文

I'm trying to create a page with a header with a navigation menu and a content area that fills the rest of the page, the content have a 100% min-height but even when it's empty it shows a vertical scrollbar because of the header size.

HTML relevant part:

<body>
  <div id="header">Davi Andrade</div>
  <nav>
    <ul>
      <li><a href="/">About</a></li>
      <li><a href="/">Portfolio</a></li>
      <li><a href="/">Downloads</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </nav>
  <div id="content">
    Text
  </div>
</body>

And the CSS:

html, body {
  background: #333333;
  font-family: "Segoe UI", "Lucida Grande", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  color: #b6b6b6;
  float: left;
  font-family: Megrim;
  font-size: 36px;
  margin: 18px 52px 18px 52px;
  text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

nav li a {
  color: white;
  display: block;
  float: right;
  font-size: 1.3em;
  list-style: none;
  padding: 24px 48px 24px 0;
  text-decoration: none;
}

#content {
  clear: both;
  background: #3e3e3e;
  box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
  min-height: 100%;
}

There is any way to fix this?

分享到QQ

分享到微博

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

发布评论

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

一世旳自豪 2025-01-02 19:32:50

根据您想要实现的目标，可以通过两种方式之一来实现此布局。

首先，如果您不需要页面底部的任何内容，那么您应该删除 #content 中的 min-height 和 background-color并将 background-color 放在 body 中。我还会稍微更改标题 HTML 结构，使其在语义上更正确且更易于使用：

HTML

<div id="header">
    <h1>Davi Andrade</h1>
    <nav>
        <ul>
            <li><a href="/">About</a></li>
            <li><a href="/">Portfolio</a></li>
            <li><a href="/">Downloads</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </nav>
</div>
<div id="content">
    ....
</div>

CSS

/* change original #header to h1 and add the following CSS */
#header {
    background: #333333;
    overflow: hidden;
}

/* remove back ground color from #content and add here */
html, body {
    ....
    background-color: #3e3e3e;
    ....
}

其次，如果您确实需要在底部添加页脚那么您需要进行上述更改，然后将 HTML 包装在带有 min-height: 100% 的容器元素中。然后，您可以使用 position:absolute 将页脚元素放置在容器元素的底部。还有一些其他的细节，我在这个 Stackoverflow 答案中进行了更详细的解释。

带页脚：http://jsfiddle.net/cNfWZ/1/

没有页脚：http://jsfiddle.net/cNfWZ/

Depending on what you are trying to achieve, this layout can be achieved in one of two ways.

Firstly, if you do not need anything at the foot of the page then you should just remove min-height and background-color off #content and place the background-color in the body instead. I would also change the header HTML structure slightly to make it a little more semantically correct and easier to work with:

HTML

<div id="header">
    <h1>Davi Andrade</h1>
    <nav>
        <ul>
            <li><a href="/">About</a></li>
            <li><a href="/">Portfolio</a></li>
            <li><a href="/">Downloads</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </nav>
</div>
<div id="content">
    ....
</div>

CSS

/* change original #header to h1 and add the following CSS */
#header {
    background: #333333;
    overflow: hidden;
}

/* remove back ground color from #content and add here */
html, body {
    ....
    background-color: #3e3e3e;
    ....
}

Secondly, if you do need a footer at the bottom of the page then you will need to make the changes above and then wrap your HTML inside a container element with min-height: 100%. You can then use position: absolute to place the footer element at the bottom of the container element. There are a few other bits and pieces to it which I have explained in more detail within this Stackoverflow answer.

With footer: http://jsfiddle.net/cNfWZ/1/

Without footer: http://jsfiddle.net/cNfWZ/

回复收藏 0 原文