Question

出于某种原因，我的页脚浮动在页面中间。让我疯了。我希望它只是一个快速修复。我看过网上，所有的答案似乎都指向一个固定的页脚，我不想要它，因为它在较小的分辨率下显示可怕。

<!DOCTYPE html>
<html>
<head>
    <title>MM Web Design</title>
    <meta name="viewport" content="width=500, initial-scale=1">
    <link rel="stylesheet" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
    <img class="logo" src="img/logo.png">
        <div class id="nav">
            <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Work</li>
            <li>Home</li>
        </ul>
    <br>
</div>


<div class="wrapper">
    <h1>Welcome to my Portfolio</h1>

    <p>
        yada yada yada
    </p>

        <div class="row">
            <div class="side-bar">
                <h3> Recent Work </h3>
                <p>Here's some of my latest work, covering web design, branding and identity.</p>
                <a href="#">View the Portfolio &rarr;</a>
            </div>

        <div class="recent-wrap">
                <a href="#"><img src="img/body-metrix.png"></a>
                <a href="#"><img src="img/body-metrix-logo.png"></a>
                <a href="#"><img src="img/market.png"></a>
        </div>
        </div>

<div class="footer-wrap">
    <div class="footer">
        <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Work</li>
            <li>Home</li>
        </ul>

        </div>
    </div>


</body>
</html>

CSS

.footer-wrap{
    height:50px;
    width:100%;
    background:#333333;
    margin: 0em;
}

.footer ul {
    font-size: 18px;
    font-weight: lighter;
    list-style-type: none;
    margin: 100px;
    padding: 0;
    text-decoration: none;
}

.footer ul li {
    float: right;
    display: block;
    padding-left: 20px;
    font-size: 0.75em; 
}

Answer 1

最有可能的是，它只显示在其他div之下。

尝试粘贴页脚？

  <div class="page-wrap">

  Content!

  </div>

  <footer class="site-footer">
  I'm the Sticky Footer.
  </footer>

和css

* {
   margin: 0;
    }
  html, body {
   height: 100%; 
  }
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px; 
 } 
.page-wrap:after {
 content: "";
 display: block;
 }
.site-footer, .page-wrap:after {
 /* .push must be the same height as footer */
 height: 142px; 
 }
 .site-footer {
 background: orange;
  }

Answer 2

div正如他们应该的那样行事？他们是正确的订购。只要您将内容填充到前面的div中，页脚就会向下移动如果你希望它保持在窗口的底部，那么它需要像已经建议的那样是粘性的。

页脚未显示在底部

2 个答案: