Question

我正在尝试重现类似于bulgari.com的布局，只要页眉，页脚和自动调整背景图像的大小（我知道bulgari.com有一个flass电影作为背景但我需要使用自动调整大小到内容div的图像。我不是很好解码css和jquery所以如果有人可以节省几分钟，我想知道如何将页眉和页脚浮动到内容div之上，并且还可以在文档加载和窗口上调整内容背景图像的大小调整事件大小。

到目前为止我已经完成了这个，但它非常基本。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var divheight = $(document).height() - $(".header").height() - $(".footer").height();
    $(".main-container").height(divheight);
});

// for the window resize
$(window).resize(function() {
    var divheight = $(document).height() - $(".header").height() - $(".footer").height();
    $(".main-container").height(divheight);
});

//-->
</script>
</head>

<body class="bg">
<div class="header"></div> <!-- header end -->

<div class="main-container">
    <div class="content">abc</div>
</div> <!-- main-container end -->

<div class="footer"></div> <!-- footer end -->

<div class="bg-container"></div> <!-- bg-container end -->
</body>
</html>

layout.css中：

@charset "utf-8";
/* CSS Document */

.bg {
    background: url(../images/thematic.jpg) repeat scroll;
}
.header {
    background: transparent url("../images/trans.png") repeat scroll 0 0;
    height: 80px;
    min-width: 990px;
    width: 100%;
    z-index: 100;
}
.bg-container {
    background: #F00;
}

.footer {
  background: url("../images/trans.png") repeat scroll 0 0 transparent;
  bottom: 0;
  font-size: 10px;
  height: 30px;
  left: 0;
  min-width: 990px;
  overflow: hidden;
  width: 100%;
}
.content {
    width: 990px;
    margin: 0px auto;
    background: #999;
}
.main-container {
    min-height: 500px;
    width: auto;
}

Answer 1

这就是你所追求的？ http://jsfiddle.net/7jd7t/
我所做的只是将身体的背景设置为固定，并将背景大小设置为100％。无需编写脚本。

如果这不是你想要的，请随时告诉我......

Answer 2

复制其他网站，无法帮助您。但就浮动页眉和页脚而言，如果你想要的是它们坚持顶部和底部并且出现在其他内容之上，那么使用纯css可以轻松实现这一点。

HTML：

<header id="fixedhead">
Your header content goes here
</header>

<footer id="fixedfoot">
Footer content
</footer>

CSS：

#fixedhead{
position: absolute;
z-index:1000;
top: 0;
bacground-color: rgba(0,0,0,0.5) /*50% transparent black background*/
}
#fixedfoot{
position: absolute;
z-index:1000;
bottom: 0;
bacground-color: rgba(0,0,0,0.5) /*50% transparent black background*/
}

css - 浮动页眉和页脚高于内容，使用jquery自动调整大小背景

2 个答案: