Question

我一直在网上看到这种做法越来越多，而且我不知道这种技术到底是什么，所以我很难找到它。它基本上是你的第一部分是框架的整个宽度和高度，但你仍然可以向下滚动并查看更多内容。

以下是发生这种情况的一个示例： http://ideaware.co/

可以用HTML和CSS完成吗？是否涉及Javascript？谢谢你的帮助！

Answer 1

它将以下背景大小应用于开头＆lt; section＆gt;：

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

有关此技术的更多详细信息，请访问：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

之前的答案部分正确，但也有一个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工具或在Firefox中使用Firebug来检查页面源并查看它是如何完成的。这是我对你的建议。检查页面并自己辨别解决问题的方法。

Answer 3

你只需要给第一个div增加100％的宽度，然后给其他div增加80％的宽度，这样第一个就是全窗口

示例：

<div style="width:100%">
/* full length contain  */
</div>

<div style="width:80%">
/* small length contain  */
</div>

Answer 4

要做这件事，你需要重置你的CSS

例如

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

你不需要使用它，你可以根据你将使用的元素创建自己的css重置。

现在看看下面的html

<html>
<head>
</head>
<style type="text/css"> 
html,body
{
margin:0px;
paddng:0px;
height:100%;
Width:100%;
background-color:black;
vertical-align: baseline;
}

#browserSize
{
color:White;
background-color:blue;
font-size:25px;
}
</style>
<body>
<div id="browserSize">
This goes to full extent of browser window
</div>
</body>
</html>

您可以将上面的代码保存在html文件中，在浏览器中查看。

我只是清除了Html和正文的边距和填充并且主div（浏览器）扩展到完整的浏览器。

如何获得浏览器框架的高度和宽度，如本例所示？

4 个答案: