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

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

好吧，伙计们和鸟儿，这就是我最终所做的。我没有直接解决问题，而是添加了一些修复程序 div。

首先，这里有一些观察结果：

我们知道，当

#column

长于视口时，

#column

的长度需要指定

<body>

的高度。

如果

#column

比视口短，视口的高度需要指定

<body>

的高度。

在任何情况下，无论内容有多长，该列都需要拉伸到页面底部。

对于第一个标准，我们需要确保

height: auto

 设置为

<body>

。如果未设置，

Height

 默认为此。我们还需要确保

#column

 具有

height: auto;

和

overflow: hidden;

，以便它扩展到其内容的大小。

对于第二个条件，我们需要在

position: absolute;

 上设置

min-height: 100%;

和

<body>

。现在，当

<body>

 比它长时，

#column

 的长度将会扩展，但不会比视口短。下一部分是修复的地方。

对于第三个标准，技巧是添加一些额外的 div 并给它们一些特殊的 css。在我的 HTML 中，我在

#column

 之外添加了两个 div。

<div id="colhack-outer">
  <div id="colhack-inner">
  </div>
</div>
<div id="column">
  ...
</div>

对于外部 div，您将其绝对定位并将其高度设置为 100%，强制其使用替代盒模型并使用填充来移动其内容区域。您将所有列样式（背景颜色、边框半径、阴影等）应用到内部 div。这是我应用到它们的 CSS：

#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;
}

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

#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;
}

现场示例：

http://nerdhow.net/

如果您有疑问或不清楚的话，请发表评论。

Answer 4

您可以通过使用绝对定位并添加额外的块来实现它（如果您的列下需要纯色背景）。

http://jsfiddle.net/kizu/7de7m/
http://jsfiddle.net/kizu/7de7m/3/

Answer 5

尝试这个 jsFiddle：

http://jsfiddle.net/8R4yN/。它似乎按照你想要的方式工作。我从以下网站获取了一些提示：http://www.tutwow.com/htmlcss/quick-tip-css-100-height/。看起来 overflow

 导致了隐藏，而里面的

#content

 也没有帮助:)。

Answer 6

我有一个类似的问题，我正在尝试在 WordPress 主题中添加自定义 CSS 到列。但似乎我无法正确理解。我希望左列背景颜色向下延伸到右列结束的位置。

用于前两列“BOKFÖRLAG”和“MERCH”。

https://chreator.se

帮助任何人吗？

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

问题描述投票：0回答：6

6个回答

最新问题

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

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6