CSS - 具有100％最小高度的内容创建垂直滚动条

Question

我正在尝试创建一个带有导航菜单的标题和填充页面其余部分的内容区域的页面，内容具有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%;
}

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

Answer 1

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

首先，如果你在页面底部不需要任何东西，那么你应该从#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/

Answer 2

是啊。 失去最小高度属性。

Answer 3

看这里：

使div填充剩余屏幕空间的高度

使用普通的CSS和HTML，这真的不是那么可能。

如果您想要的是背景为浅灰色，我建议您将身体的背景设为该颜色，然后使标题和导航为深灰色。 内容看起来像填充其余内容，但实际上不会。

编辑：

对不起，我应该说不可能使用div和body元素。 使用桌子，您可以实现类似于您的目标。

Answer 4

Steve Sanderson在这里对高度CSS问题有很好的处理： http ： //blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

CSS - 具有100％最小高度的内容创建垂直滚动条

问题描述

4 个解决方案

解决方案1
4 已采纳 2012-01-15 20:51:24

解决方案2
0 2012-01-14 17:07:34

解决方案3
0 2012-01-14 17:29:23

解决方案4
0 2012-01-14 17:29:27

CSS - 具有100％最小高度的内容创建垂直滚动条

问题描述

4 个解决方案

解决方案1 4 已采纳 2012-01-15 20:51:24

解决方案2 0 2012-01-14 17:07:34

解决方案3 0 2012-01-14 17:29:23

解决方案4 0 2012-01-14 17:29:27

解决方案1
4 已采纳 2012-01-15 20:51:24

解决方案2
0 2012-01-14 17:07:34

解决方案3
0 2012-01-14 17:29:23

解决方案4
0 2012-01-14 17:29:27