html - 具有响应式设计的强制页脚底部

Question

我有一个页脚，当页面很长时，它只贴在底部，但如果页面太短，页脚就会贴在页面中间。我见过一些方法，它们在 .wrapper 类中设置了 margin:0 auto -180px;。然而，这可能是一个问题，因为我的页脚高度会根据分辨率(响应式设计)而变化。还可以设置 .footer 类 position:fixed; 和 bottom:0; 也可以，但它会覆盖长页面的内容。

我的页脚还没有 100% 完成，我计划让每个 .item 类在大屏幕上并排显示，但在手机等小屏幕上显示在彼此下方。这将使页脚高度更长，这就是为什么我在设置高度 .footer 高度和 .wrapper 边距“静态”时遇到问题的原因。

CSS:

.footer {
    width:100%;
    background-color:#23282c;
    position: relative;
    margin:auto;
    min-height:180px;
    z-index:15;
}

.footer-bottom-wrapper {
    display:inline-block;
    margin-bottom: 0;
    width:100%;
}
.footer-bottom {
    background-color:#1e2327;
    font-size:11px;
    line-height:25px;
    color:#777f8c;
    position:absolute;
    bottom:0;
    width:100%;
    height:25px;
    width:100%;
    z-index:9;
}



.item {
    position:absolute;
    left:220px;
    display:inline-block;
}

.i1 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-210px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i2 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i3 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    font-size:15px;
    display:inline-block;
}

.item h1 {
    color:#fff;
    border-bottom:1px solid #475f93;
    font-size:18px;
    text-align:left;
}

.item .p {
    color:#777f8c;
}

.footer-link {
    color:#777f8c;
    margin-left:5px;
    margin-right:5px;
}

.footer-link:hover {
    color:#fff;
}

包装器和主体 CSS:

* { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}
body {
  background: #e9ebee;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;
  
}

页脚.php:

<footer class="footer" id="footer">

    <div class="item i1">
        <h1>Subscribe</h1>
        <div class="p">
            <form method="POST" action="/assets/php/subscribe.php">
                <label>Subscribe to our newsletter!</label><br />
                    <input type="email" class="footer-input" name="sub-email" placeholder="E-mail">
                
                <div style="margin-top:5px;"></div>
                    <input type="submit" value="Subscribe" class="btn" name="subscribe" style="width:100%;"/>
            </form>
        </div>
    </div>
    

    <div class="item i2">
        <h1>Help</h1>
        <div class="p">
            Need any help?<br />
            You can find a help page<a href="/help" class="footer-link">here</a>.
        </div>
    </div>

    
    <div class="item i3">
        <h1>Server</h1>
        <div class="p">
            About our server
        </div>
    </div>


    <div class="footer-bottom-wrapper">
        <div class="footer-bottom">
            <div class="fl">
                <a class="footer-link" href="/help">Help</a>    |
                <a class="footer-link" href="/ads">Advertise</a>    |
                <a class="footer-link" href="/Rules">Rules</a>  |
                <a class="footer-link" href="/Terms-Of-Service">Terms Of Service</a> |
                <a class="footer-link" href="/credit">Credits</a>
            </div>
            <div class="footer-fr" style="padding-right:10px;">&copy; Copyright <?php echo $domain; ?> | 2015 - <?php echo date("Y") ?></div>
        </div>
    </div>
</footer>

    <!-- Script that requier bottom! -->
        <script type="text/javascript" src="/assets/script/notification.js"></script>
        <script type="text/javascript" src="/assets/script/level-bar.js"></script>


<?php if(isset($_SESSION['user'])){ ?>
      </div>
<?php }else{ ?>
    </div>
<?php } ?>

Answer 1

我经常在桌面模式下使用固定高度(例如 height: 120px;)的 position: absolute; 粘性页脚。内容区域根据页脚高度得到一个 padding-bottom 以防止重叠。

在移动模式下，页脚从 position: absolute; 更改为 position: relative;，高度现在为 height: auto; . padding-bottom 也必须从内容区域中移除。

#content {
    padding-bottom: 120px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
}
@media screen and (max-width: 767px) {
    #content {
        padding-bottom: 0;
    }
    #footer {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
    }
}

基本示例:

html,
body {
  margin: 0;
  height: 100%;
}
#page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  padding-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
}
@media (max-width: 400px) {
  #content {
    padding-bottom: 0;
  }
  #footer {
    position: relative;
    bottom: auto;
    left: auto;
    height: auto;
  }
}

<div id="page">
  <div id="header"></div>
  <div id="#content">small content</div>
  <div id="footer">footer content</div>
</div>