Question

我有一个基本的HTML页面，其中所有内容都包含在mainWrapper div和secondWrapper div中。

一切都设置为960px大小（pageHeader，pageContent和pageFooter）。

我需要将960px的所有内容与pageFooter保持一致。

这是我的CSS代码：

<style type="text/css">
<!--
body {
}

#secondWrapper {
        margin-left:auto;
    margin-right:auto;
    width:960px;
    min-width:910px;

}
#mainWrapper{
    margin-left:auto;
    margin-right:auto;
    width:960px;

}

#pageHeader {
    height:80px;
    width:100%;
    min-width: 918px;
    border-bottom: solid 1px #ededed;
    z-index:1000;
    position:relative;


}
#pageContent {
    clear:both;
    width:100%;
    min-width: 918px;
    background-image:url(img/map.png); 
    height:600px; 
    background-repeat:no-repeat;
    background-position:center;
    box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
    z-index:1;

}
#pageFooter {
    background-color:#CCC;
    width:100%;
    min-width: 918px;
}

#logo{
    position: absolute;
    margin-left:29px;
    background-color:#cb202d;
    width:120px;
    height:110px;
    top: 0;
    text-align:center;
    vertical-align:center;
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:24px;
    color:#FFF;
    font-weight:bold;
    float:left;
    z-index:1000;
        -webkit-box-shadow: 0 5px 6px -6px grey;
       -moz-box-shadow: 0 5px 6px -6px grey;
            box-shadow: 0 5px 6px -6px grey;
}

#logoTxt{
    position: relative;
    top:26%;

}

#yourCurrentTime{
    float:left;
    left:220px;
    top:10%;
    position:relative;
    border: 10px solid #1abc9c;
    border-radius:4px;



}

#arrow-down {
    position:absolute;
    width: -23px;
    height: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1abc9c;
    left: 99px;
    top: 30px;
}

#b {
    position:absolute;
    width:200px;
    height:115px;
    z-index:10000000;
    left: -59px;
    top: 48px;
    background-color:#333;
    display:none;



}

    div#a:hover div#b {
        display: inline;

    }
        div#a:hover {
            background-color:#eceded;
            cursor:pointer;


    }

            div#divBtn:hover {
            background-color:#4a4a52;
            cursor:pointer;


    }


    div#a{
    width:140px;
    height:47px;
    position:absolute;
    left: 825px;
    top: 0px;
    }


-->
</style>

我在Google和stackoverflow上尝试了一些解决方案，如下所示：

html,
body {
 margin:0;
 padding:0;
 height:100%;
}

但这对我不起作用！

任何帮助都将不胜感激。

这是Jsfiddle：http://jsfiddle.net/crf121359/jwgfH/

Answer 1

你需要这样做：

HTML

<div class="wrap">
   <div class="wrap_inner> 
       <!-- Pwraput here your pageHeader and pageContent -->
   </div>
</div>
<footer>
</footer>

CSS

.wrap {
  position: relative;
  min-height: 100%;
  padding-bottom: 200px /*footer height*/
}

.wrap_inner {
  width: 960px;
  margin: 0 auto;
}

footer {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
}

Answer 2

You just need to take your pageFooter outside of the wrapper.

这是一个有效的例子： http://jsfiddle.net/jwgfH/3/

你应该看看它在这里看起来如何，而不是在小框架内： http://jsfiddle.net/jwgfH/3/show

Answer 3

width: 100%;

仅在父元素定义了宽度时才有效。

尝试给你的身体元素一个最大宽度，看看是否有效

Answer 4

如果您想要创建960px宽的网页，请在<body>标记中将width:960px;放入CSS中进行定义。

然后，在其余元素中使用width:100%; - 仅适用于您希望显示为960px的元素。其余部分可以使用width:50%;，width:25%;进行划分，50%分别为960px和25% 960px。

此外，height:100%可以忽略不计，其他元素会自动定义网页的高度，只要您正确放置它们。

简而言之，请执行以下操作：

body {
    width:960px;
    margin:0 auto;
}

#secondWrapper {
    width:100%;
    float:left;
}

......依此类推。

（注意：要解决您的定位问题，float:left可能是最好的方法。在准确定位所需的大多数元素上使用它。如果没有，浏览器将估计它的去向。）

编辑后：

如果您希望960px和#pageContent之间存在#pageFooter的差距，您可以随时定义这样的保证金：

#pageFooter {
    margin-top:960px;
}

Answer 5

你能展示自己的HTML吗？如果父div或容器的宽度为100％，那么它应该显示完美的结果。

CSS中只有100％宽度的页脚？

5 个答案: