0

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

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

我需要将所有内容与 pageFooter 分开 960 像素。

这是我的 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/

4

5 回答 5

2

你需要这样做：

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;
}
于 2013-08-14T09:52:02.260 回答
1 
You just need to take your pageFooter outside of the wrapper.

这是一个工作示例：http: //jsfiddle.net/jwgfH/3/

您应该在这里看到它的外观，而不是在小框架内：http: //jsfiddle.net/jwgfH/3/show

于 2013-08-14T10:06:13.213 回答
0

你也可以显示你的html吗？如果父 div 或容器的宽度为 100%，那么它应该显示完美的结果。

于 2013-08-14T09:54:54.490 回答
0

如果您想创建一个较宽的网页，请通过放置在 CSS 中的方式在您的标签960px中定义它。<body>width:960px;

然后，width:100%;在其余元素中使用 - 仅用于您想要显示为960px. 其余的可以用width:50%;,来划分width:25%;，分别是50%of960px和25%of 960px。

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

简而言之，这样做：

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

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

...等等等等。

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

编辑后：

如果你想要和960px之间的间隙，你总是可以像这样定义一个margin-top：#pageContent#pageFooter

#pageFooter {
    margin-top:960px;
}
于 2013-08-14T09:51:29.857 回答
0 
width: 100%;

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

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

于 2013-08-14T09:48:58.920 回答