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

Posted 2023-03-05

【中文标题】如何将容器高度作为窗口大小

【英文标题】：How to put the container height as the window size

【发布时间】：2011-10-16 06:40:16

【问题描述】：

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

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

【问题讨论】：

尝试高度：100%？示例代码会很好。

【参考方案1】：

html,body 
    height:100%;
    padding:0;

#container 
    min-height:100%;

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

【讨论】：

这个答案+1。 @markzzz：您的 JSFiddle 不包含 AlienWebguy 的所有代码。 jsfiddle.net/cruT5/2/。我不喜欢在 Safari 中看到的垂直滚动条，但这是另一个问题。

是的。在下次关闭之前尝试一下：jsfiddle.net/AlienWebguy/cruT5/5

将margin:0; padding:0; 添加到html,body 似乎可以解决滚动条的小问题。

AlienWebguy，想知道您是否知道在 IE 中这项功能可以使用多久？

到底是谁投了反对票？这是迄今为止最好的答案。

【参考方案2】：

您可以使用 100% 值来解决此问题或使用 JavaScript。与其写一些长篇故事，我建议你看看这个......

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

【参考方案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);

【讨论】：

-1 这在没有 JavaScript 的情况下很容易做到，而且问题中不仅没有 JavaScript 标签，而且您偶尔使用 JQuery。 document.getElementsByTagName('body') 可以简单地替换为 $('body')

@AlienWebguy - 如果您真的阅读了他的问题，他表示他确实对 JavaScript 解决方案持开放态度。还有，jQuery 的零星使用和中国的茶叶价格有什么关系？考虑到它毫无根据，我真的不欣赏你的反对票......

中国茶叶价格？你在说什么WTF？哈哈。我的基础是，这是一个可怕而混乱的解决方案，如果您实际上为所有这些选择器使用了 JQuery，您可以大大缩短它

如果您使用 jQuery，为什么不直接使用 height() 和 width() 来跨浏览器获取视口的尺寸。这不是 jQuery 的重点吗？

是的，你让我了解了 $('body') 的普遍奥秘。这是一个讽刺性的 +1