Question

这是我的问题：我的网站的某些部分不长（在高度方面），我喜欢将容器扩展到屏幕的底部。问题是每台计算机的窗口大小可能不同（由于显示器分辨率）。所以像min-height这样的技巧会失败。我该怎么办？用javascript？或者可能将绝对位置+ div清除并扩展容器？任何帮助将不胜感激！

我的意思是：背景颜色必须在this example上显示整个屏幕。

Answer 1

html,body {
    height:100%;
    padding:0;
}
#container {
    min-height:100%;
}

工作演示：http://jsfiddle.net/AlienWebguy/cruT5/5/

Answer 2

您可以使用100％值来解决此问题或JavaScript。我不建议写一些长篇故事，而是建议你查看一下...

Make Iframe to fit 100% of container's remaining height

Answer 3

我在使用类似要求时使用以下内容来获取尺寸：

// You can just copy and paste this function:

function getViewportDimensions() {

    var viewport = {};

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewport.Width = window.innerWidth;
        viewport.Height = window.innerHeight;
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewport.Width = document.documentElement.clientWidth;
        viewport.Height = document.documentElement.clientHeight;
    }

    // older versions of IE

    else {
        viewport.Width = document.getElementsByTagName('body')[0].clientWidth;
        viewport.Height = document.getElementsByTagName('body')[0].clientHeight;
    }

    return viewport;
}

然后你可以像这样使用它：

// Obviously, you'll need to include jQuery...

function resizeViewportItems() {

    var viewport = getViewportDimensions();

    $('#some-element').css('height', viewport.Height);
    $('#another-element').css('width', viewport.Width);
}

如何将容器高度作为窗口大小

3 个答案: