1

我在 Stackoverflow 上看到了关于这个问题的非常相似的问题，但我还没有找到适合我的场景的解决方案。如标题中所述，我正在寻找唯一的 CSS 解决方案，并且更愿意避免使用 Javascript。

我的问题是我无法弄清楚如何在从页面标题延伸到页面底部的网页上创建内容框。我希望扩展此内容框的原因是让图片填充我网站登录页面上内容框的背景。我尝试了两种不同的技术，但都没有正确工作。我在下面附上了两个测试：

场景一 - 有一个包装器，该包装器使用包装器内的标题和内容扩展页面。

HTML：

<div id="wrapper">
  <header>

  </header>
  <div id="content">
  </div>
</div>

CSS：

html, body { 
    padding: 0px;
    margin: 0px;
    min-width:1124px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    border: 3px solid black;
}
wrapper {
    min-height:100%;
    border: 3px solid blue;
    position:relative;
    padding:0;
    margin:0;
}

header {
    height: 155px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid black;

    /*Top Gradient Defined*/
    background: #ffc578; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
    width: 100%;
    min-width: 1100px;
    position: relative;
    margin-right:auto; 
    margin-left:auto;
    min-height: 100%;
    height:100%;
    padding:0;
    border: 5px solid red;
    background-color:black;
    background-size:cover;
    position: relative;
}

场景 1 的小提琴：http: //jsfiddle.net/tPNB4/5/

如您所见，内容 div 只会扩展到内容的长度，而不是包装器 div 的整个长度。

场景二：让内容位于标题 div 下方。

HTML：

<header>

</header>
<div id="content">
</div>

CSS：

html, body { 
    padding: 0px;
    margin: 0px;
    min-width:1124px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    border: 3px solid black;
}


header {
    height: 155px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid black;

    /*Top Gradient Defined*/
    background: #ffc578; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
    width: 100%;
    min-width: 1100px;
    position: relative;
    margin-right:auto; 
    margin-left:auto;
    min-height: 100%;
    height:100%;
    padding:0;
    border: 5px solid red;
    background-color:black;
    background-size:cover;
    position: relative;
}

场景 2 的小提琴 - http://jsfiddle.net/6MGrh/2/

如您所见，内容框超出了页面的长度并生成了滚动条。

如果有人可以就为什么这两种情况都不起作用提供一些指导，我们将不胜感激。

4

2 回答 2

0

请注意，您以像素为单位指定标题高度，% 中的所有其他内容也请注意超出页面的部分正好是 155 像素。头球把一切都往下推，因为你告诉content要占据头球已经占据的空间

新的CSS：

html, body, div, header {
    box-sizing:border-box;
}
html, body {
    ....
    height:100%;
    ....
}
#wrapper {
    height:100%;
    ....
}
header {
    height: 20%;
    width: 100%;
    ....
    /*Top Gradient Defined*/
    .....
}
#content {
    .....
    height:80%;
    ....
}

这是一个 jsFiddle 示例

于 2013-07-03T23:11:13.103 回答
0

一种解决方案是使用元素的绝对定位。内容部分然后被页眉和可选页脚的高度偏移。

小提琴：http: //jsfiddle.net/GVPqP/1

div{min-height:50px;width:90%;
  border:1px solid #aaa;
  position:absolute;left:0;right:0;
}

#header{top:0;}
#content{top:50px;bottom:50px;}
#footer{bottom:0;}
于 2013-07-04T00:59:02.807 回答