1

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

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

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

4

4 回答 4

1

它将以下背景尺寸应用于开头的 <section>：

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

可以在此处找到有关此技术的更多详细信息：http: //css-tricks.com/perfect-full-page-background-image/

于 2013-07-30T03:13:08.180 回答
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 中打开开发工具或在 Firefox 中使用 Firebug 来检查页面源代码并查看它是如何完成的。这是我给你的建议。检查页面并自己辨别解决问题的方法。

于 2013-07-30T03:32:40.790 回答
0

您只需要为第一个 div 提供 100% 的宽度，然后为其他 div 提供 80% 的宽度，因此第一个在全窗口中

例子 ：

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

<div style="width:80%">
/* small length contain  */
</div>
于 2013-07-30T03:07:41.797 回答
0

为了做这件事，你需要重置你的 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（浏览器）扩展到完整的浏览器。

于 2013-07-30T04:18:44.187 回答