html - 页脚未按预期运行

Question

我在我的网页上设置了一个 30px 高度的白色页脚。出于某种原因，当我向下滚动页面时，页脚会比页脚高得多，并且文本部分（带有浅灰色背景的 div）与其重叠。你知道出了什么问题以及如何解决这个问题吗？Jsfiddle 在这里：http: //jsfiddle.net/Grek/AdX3m/ 非常感谢

这是一个截图

在此处输入图像描述

CSS

    @charset"UTF-8";
/* CSS Document */
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}
Html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
}
#header {
    width: 100%;
    height: 60px;
    border-bottom: 1px dotted #CCC;
    background: #F2F2F2;
}
#logo {
    position: absolute;
    left: 20px;
    top: 35px;
    color: #000;
    font-size: 20px;
}
#header-text {
    width: 400px;
    position: absolute;
    top: 70px;
    left: 20px;
    font-size: 12px;
    font-weight:300;
    color: #FFF;
}
#wrap {
    min-height: 100%;
    height: 100%;
    position: relative;
    background: #0063C3; /* Old browsers */
    background: -moz-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0063C3), color-stop(100%, #2E88C9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* IE10+ */
    background: linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063C3', endColorstr='#2E88C9', GradientType=1 )
}


#footer {
    position: fixed; /* Force it to stick to the bottom*/
    width: 100%;
    bottom: 0;
    height: 30px;
    background: #fff;
}

/* mainmenu */

#mainmenu {
    width: 100%;
    /* min-height: 180px; */
    padding-bottom: 20px;
    margin-top: -42px; 
    /* padding-top: -42px; */
    overflow: hidden;
}
#mainmenu ul {
    list-style: none;
    margin: 0;
    float: right;
    color: #000;
}
#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}
#mainmenu>ul>li {
    margin-left: 20px;
}
#mainmenu ul li a {
    font-size: 12px;
    display: block;
    text-decoration: none;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
    color: #fff;
    -moz-transition-property: all, -moz-transform;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-property: all, -ms-transform;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-property: all, -o-transform;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-property: all, -webkit-transform;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-property: all, transform;
    transition-duration: .4s, .4s, .4s, .4s;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
    color: #005EBC;
    -moz-transition-property: all, -moz-transform;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-property: all, -ms-transform;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-property: all, -o-transform;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-property: all, -webkit-transform;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-property: all, transform;
    transition-duration: .4s, .4s, .4s, .4s;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
}
p {
    font-size: 13px;
    color: #fff;
    text-align:justify;
    font-weight:300;
}
h1 {
    font-size: 30px;
    color: #fff;
    /* display: inline-block; */
    }

H5 {
    text-transform: uppercase;
    margin-bottom: 5px;
}

div#content-left {
    float: left;
    width: 35%;
    background: lightblue;
}
div#content-right {
    float: right;
    width: 60%;
    padding-right: 50px;
    background:#ccc;
}
div#content-center {
    overflow: hidden;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="normalize.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="prefixfree.min.js"></script>
</head>

<body>
<div id="wrap">
  <div id="header"></div>
  <div id="logo">My Name</div>
  <div id="mainmenu">
    <ul>
      <li>
        <h5>Menu I</h5>
        <ul>
          <li><a title="" href="">Biography</a> </li>
          <li><a title="" href="">Publications</a> </li>
        </ul>
      <li>
        <h5>Menu 2</h5>
        <ul>
          <li><a title="" href="">Demo</a> </li>
          <li><a title="" href="">Features</a> </li>
          <li><a title="" href="">Comparison</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 3</h5>
        <ul>
          <li><a title="" href="">Item 1</a> </li>
          <li><a title="" href="">Item 2</a> </li>
          <li><a title="" href="">Item 3</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 4</h5>
        <ul>
          <li><a title="" href="">ddfd</a> </li>
          <li><a title="" href="">dsfd</a> </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- END DIV Main Menu -->

    <div id="header-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut.</div>

    <div id="content-left">column1</div>
    <div id="content-right">
      <h1>Novitates autem si spem</h1>
      <p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus
        fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo
        loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin
        in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est,
        quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero
        in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo
        valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in
        quibus diutius commorati sumus.</p>
      <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox
        interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius,
        modo non reclamante publico vigore, discessit.</p>
      <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox
        interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius,
        modo non reclamante publico vigore, discessit.</p>
      <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
        terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
        sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
        Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
        itidemque Ascalonem Gazam aevo superiore exstructas.</p>
      <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
        reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
        suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
        calamitatum societates! Ad quas non est facile inventu qui descendant.
        Quamquam Ennius recte.</p>
              <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
        reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
        suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
        calamitatum societates! Ad quas non est facile inventu qui descendant.
        Quamquam Ennius recte.</p>
              <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
        reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
        suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
        calamitatum societates! Ad quas non est facile inventu qui descendant.         reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
        suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
        calami
        Quamquam Ennius recte.</p>
              <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans
        terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem
        sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem
        Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim
        itidemque Ascalonem Gazam aevo superiore exstructas.</p>
      <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus
        reque publica versantur; ubi enim istum invenias qui honorem amici anteponat
        suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur
        calamitatum societates! Ad quas non est facile inventu qui descendant.
        Quamquam Ennius recte. END END END</p>
    </div>

  <div id="footer">Test Footer</div>
  <!-- END DIV Footer --> 
</div>
<!-- END DIV Wrap -->
</body>
</html>

score 2 · Accepted Answer

从样式页脚中删除

position:fixed;

或者如果您希望页脚粘在底部，请更改一些高度值或字体大小

score 1 · Accepted Answer

当您向下滚动时，页脚的高度不会改变，它保持不变。问题在于您的元素高度，特别是#wrap，它会影响background-color您设置的样式......

除了在中设置背景颜色样式#wrap，您可以尝试将它们设置为body

body { background: #0063C3; ... }

这可能会解决您描述的问题。

html - 页脚未按预期运行

2 回答 2

Related

Reference