Question

当内容比视口短时，我需要将内容列扩展到页面底部，但在内容较长时仍然会展开。该列必须从页面顶部稍微向下。

以下是我所描述的HTML：

<html>
  <body>
   <div id="content">
      <p> asdf ghjkl </p>
    </div>
  </body>
</html>

这是CSS

#content {
  min-height: 100%;
  margin: 100px 0 0;
}

此方法的问题是min-height: 100%;没有考虑填充，因此页面总是比我想要的大。

这是我正在寻求的行为：

desiredbehavior

有没有办法在不使用Javascript的情况下完成此任务？

Answer 1

绝对定位可以为您做到这一点：

首先删除您的min-height和margin，然后将此规则应用于您的CSS。

#content {
    position: absolute;
    top: 100px;
    bottom: 0;
}

Answer 2

在CSS3中，您可以使用box-sizing

通过将其设置为border-box，您可以强制浏览器使用指定的宽度和高度渲染框，并在框中添加边框和填充
。

Answer 3

Ok blokes and birds，这就是我最终做的事情。我没有直接解决问题，而是添加了一些修复器div。

首先，这里有一些观察：

我们知道当#column比视口长时，#column的长度需要指定<body>的高度。
如果#column比视口短，则视口的高度需要指定<body>的高度。
无论内容有多长，该列都需要在所有情况下都延伸到页面底部。

对于第一个标准，我们需要确保在height: auto上设置<body>。如果没有设置，Height会对此进行默认。我们还需要确保#column有height: auto;和overflow: hidden;，以便扩展到其内容的大小。

对于第二个条件，我们需要在position: absolute;上设置min-height: 100%;和<body>。现在<body>的长度会在#column长于#column时展开，但不会比视口短。下一部分是修复的来源。

对于第三个标准，诀窍是添加一些额外的div并给它们一些特殊的css。在我的HTML中，我在<div id="colhack-outer"> <div id="colhack-inner"> </div> </div> <div id="column"> ... </div>之外添加了两个div。

#colhack-outer {
    height: 100%;
    padding: <where you want to shift the column to>;
    position: absolute;
    width: 50%;
}
#colhack-inner {
    height: 100%;
    width: 100%;
    background-color: #303030;
}

对于外部div，你绝对将它的高度设置为100％，强制它使用另一个盒子模型并使用填充移动它的内容区域。您将所有列样式（背景颜色，边框半径，阴影等）应用于内部div。这是我申请的CSS：

#contentbox {
    position: relative;
    padding: <where you want to shift the column to>;
    width: 50%;
    color: #EEEEEC;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

您还必须使您的实际内容容器使用该特殊的盒子模型，并使用填充移动它：

{{1}}

此处的实例：http://nerdhow.net/

如果您有疑问或者某些事情不明确，请发表评论。

Answer 4

试试这个jsFiddle：http://jsfiddle.net/8R4yN/。它似乎按照你想要的方式工作。我从http://www.tutwow.com/htmlcss/quick-tip-css-100-height/获得了一些提示。看起来overflow导致隐藏，而#content内部也没有帮助：）。

Answer 5

你可以通过使用绝对定位和添加额外的块来实现它（如果你需要在你的列下面有一个坚实的背景）。

所以，当你有一点内容时，你会得到http://jsfiddle.net/kizu/7de7m/
如果你有很多内容，你会得到http://jsfiddle.net/kizu/7de7m/3/

如何强制我的列始终延伸到页面底部？

5 个答案: