html - 我如何获得浏览器框架的高度和宽度，就像在这个例子中一样？

Question

我在网上看到越来越多的人这样做，但我不知道这种技术到底叫什么，所以我费了好大劲才找到它。基本上，第一部分是框架的整个宽度和高度，但您仍然可以向下滚动并查看更多内容。

这是发生这种情况的一个例子: http://ideaware.co/

可以仅用 HTML 和 CSS 完成吗？是否涉及Javascript？ 感谢您的帮助!

Answer 1

前面的答案部分正确，但也有一个 JS 组件。您引用的页面使用了 jQuery，它支持如下功能:

function sizebanner() {
windowHeight = $(window).height();
windowWidth = $(window).width();
var bannerHeight = $(".banner > div").height();

if (windowWidth >= 768) {
    $(".banner.home, .banner.project").css({ 'height' : windowHeight + "px"});
    $(".banner.home > div, .banner.project > div").not(".imgproject").css('padding-top', parseInt((windowHeight - bannerHeight) / 2));
} else if (windowWidth >= 480 ) {
    $(".banner.home, .banner.project").css('height','485px'); 
    $(".banner.home > div").css('padding-top','183px');
    $(".banner.project > div").not(".imgproject").css('padding-top','150px');
} 
else {
    $(".banner.home").css('height','312px'); 
    $(".banner.home > div").css('padding-top','105px');
    $(".banner.project").css('height','420px'); 
    $(".banner.project > div").not(".imgproject").css('padding-top','105px');
} 
};

此函数为预设屏幕尺寸组动态调整横幅 div 的内容。这还有很多，所以我建议您检查页面源代码并对其进行一些逆向工程以获得答案。我发现，如果我在网页中遇到我真正喜欢的东西，我会在 IE 中按 F12 或在 Chrome 中打开 te dev tools 或在 Firefox 中使用 Firebug 检查页面源代码并查看它是如何完成的。这是我给你的建议。检查页面并自己辨别解决问题的方法。