DIV在view-port的底部剪切，当它应该拉伸到它内部的内容的高度 [英] DIV cuts off at bottom of view-port when it should stretch to the hight of the content inside it

问题描述

查看此jsfiddle示例： http://jsfiddle.net/2YbpZ/5/

Take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/5/

这里，我将内容 div扩展到100％高度，它的工作正常。但是，当我在 content div中有一些非常高的内容时，会发生这种情况： http://jsfiddle.net/2YbpZ/2/

Here, I'm stretching the content div to 100% height and it's working fine. However, when I have some really tall content within the content div this happens: http://jsfiddle.net/2YbpZ/2/

如您所见，内容

As you can see, the content div cuts off at the bottom of the viewport when I want it to carry on with the content inside it.

我知道为什么会发生这种情况，因为它的父对象元素（html和body）设置为100％的高度，它不能超过那个。要解决这个问题，我添加一个封装div，现在它的工作原理： http://jsfiddle.net/2YbpZ/4/

I know why this happens, because its parent element (html and body) are set to 100% height and it can't go more than that. To fix this I add a wrapper div and now it works: http://jsfiddle.net/2YbpZ/4/

但现在有另一个问题，当 content div中的内容不够长在视口外伸展 content div不伸展到页面的高度，如下： http://jsfiddle.net/2YbpZ/4/

But now there's another problem, when the content inside the content div isn't long enough to stretch outside of the viewport the content div doesn't stretch to the height of the page, like so: http://jsfiddle.net/2YbpZ/4/

因此，问题是，如何适应这会使内容总是至少 100％高度？

So, the question is, how can I adapt this to make the content div always at least 100% height?

推荐答案

不要使用包装器，而是使用 min-height：100％，而不是 height：100％您的#content div。

Dont use a wrapper, but use min-height:100% instead of height:100% on your #content div.

注意： IE6不支持min-height。

Note: IE6 does not support min-height.

这篇关于DIV在view-port的底部剪切，当它应该拉伸到它内部的内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！