Question

我有一个高度为100％的div。我希望高度为浏览器窗口的100％，加上底部的额外32px，将被截断（及其内容）。这可能吗？我搜索过，但似乎大多数人都试图避免这种情况，而不是创造它。一个纯CSS的解决方案会更好，但如果它是唯一的方法，我会尝试javascript或jquery。

提前致谢！

澄清：div中的内容我试图裁掉，大约32px值。因此，添加填充或任何类型的空白空间并不是我正在寻找的。感谢。

Answer 1

只需按常规方式制作100％高度div，然后为其添加padding-bottom: 32px;。

例如：http://jsfiddle.net/zbp7U/

有一些实际内容：http://jsfiddle.net/zbp7U/1/

Answer 2

除了填充选项之外的另一种可能性......

html, body { height: 100%; }

.customBox { height: 100%; position: absolute; }

.customBox .overflowFooter { position: absolute; bottom: -32px; height: 100px; }

（假设你的内容框有class =“customBox”，你的div里面有一个div =“overflowFooter”）

上面的选项会为您提供一个标准的100％高度框，但会添加一个额外的“页脚”部分，该部分是手动定位的，使得该内容的底部比主要内容低32px，但其高度为100px。 / p>

我真的不确定你要去的地方......

Answer 3

受@ Steve的回答启发，您可以使用position: absolute隐式设置高度并设置top和bottom值。在这种情况下：

HTML：

<div class="content"></div>

CSS：

html,body { height: 100%; }

.content {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: -32px;
}

示例：http://jsfiddle.net/blineberry/qpvum/

Answer 4

你可以超越100％

height: 110%;

使div有目的地溢出32px？

4 个答案: