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

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

首先，如果您不需要页面底部的任何内容，那么您只需将min-height和background-color移除#content并将background-color放入{ {1}}而是。我还会稍微改变标题HTML结构，使其在语义上更正确，更容易使用：

HTML 的

body

CSS

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

其次，如果您确实需要页面底部的页脚，则需要进行上述更改，然后将HTML包装在包含/* 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; .... }的容器元素中。然后，您可以使用min-height: 100%将页脚元素放在容器元素的底部。我还在this Stackoverflow answer中更详细地解释了其他一些部分内容。

使用页脚：http://jsfiddle.net/cNfWZ/1/

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

Answer 2

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

Answer 3

看这里：

Make a div fill the height of the remaining screen space

使用普通的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 个答案: