Question

我也附上了我的设计，试图解释事情

enter image description here

我非常希望标题像全屏图像一样工作（例如：http://www.flemingsteele.com/）但是我想要切割标题，白线在我的设计上并让它拉伸以适应所有显示器宽度。我也希望标题固定。

我希望我的页脚会发生同样的情况，这只是一个磨砂或低不透明度的白条，我想在页面底部重复，但我希望它固定在底部。

中间部分我想将它作为背景颜色并在该区域内有div。我现在遇到的问题是每当我向div1或div2添加更多信息时它都不会向下滚动，因为我使用了position：fixed。这样做的原因是我希望div保持在标题之下，当我向下滚动文本时会超出标题

我也想要它，所以如果我将更多信息添加到任何一个div和scoll down我希望将标题固定到浏览器的顶部，当我向下滚动所有我将看到的是绿色背景，每个div与信息和固定的页脚在底部。

这是我目前的编码。

HTML：

    <body>
  <img alt="full screen background image" src="images/header.png" id="full-screen-background-image" /> 
<div id="wrapper">

    <div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div>

            <div class="minicontainer">

    <div class="title"></div> 

    <div id="content">
    <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>    
</div><!--MINI CONTAINER DIV!-->
 </div><!--WRAPPER DIV!-->

CSS：

 #wrapper                       {width:800px; height:auto; margin:0 auto}

.logo                           {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;}
#header{
    width:100%; 
    background: url(yourimage);
}

.minicontainer                  {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;}

.title                          {background-image:url(images/title.png); width:255px; height:51px;}

#content                        {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;}

/* BACKGROUND IMAGE DO NOT TOUCH */


html, body {
  height: 0%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color:#8cc643
}

#full-screen-background-image {
  z-index: -999;
  min-height: 30%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

希望这个解释清楚

Answer 1

至于我的理解，这就是你要做的事情，使标题的部分和页脚部分得到修复。以下代码就是这样做的。

HTML

<div class="header">
</div>

<div class="footer">
</div>

CSS

.header{width:100%}

.footer {
    background-color: black;
    bottom: 0;
    float: right;
    height: 30px;
    left: 0;
    margin-top: auto;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

示例如下所示。 http://jsfiddle.net/4k2Zj/

Answer 2

我相信这就是你要找的东西。如果我弄错了，请告诉我。

CSS

* {margin: 0; padding: 0}
#wrapper {
    background-image: url(http://windturbinezone.com/wp-content/uploads/2010/01/windfarm.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
}
#content {
    background-color: #8ac841;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(138, 200, 65)),to(rgb(188, 252, 109)));
    background-image: -webkit-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
    background-image: -moz-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
    background-image: -o-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
    background-image: -ms-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
    background-image: linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8ac841', EndColorStr='#bcfc6d');
    width: 100%;
    height: 500px;
}
#footer {
    background: green;
    width: 100%;
    height: 100px;
}
#div1 {
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    position: relative;
    background-color: yellow;
    display: inline-block;
}
#div2 {
    left: 200px;
    top: 100px;
    width: 200px;
    height: 200px;
    position: relative;
    background-color: red;
    display: inline-block;
}

HTML

<div id="wrapper"></div>
<div id="content">
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
</div>

Answer 3

继承成品

谢谢大家帮助了所有人。

http://colmandesigns.123abc.co.nz/dev/bni/

为浏览器设置标题全宽

3 个答案: