使用响应式设计强制页脚底部

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>

Answer 2

尝试设置 html 和 body 的最小高度：

html, body {
    min-height: 100%;
}

footer 是 body 的直接子代吗？

Answer 3

在你的 CSS 中试试这个可能对你有帮助。

 html {
        min-height: 100%;
        position: relative;
    }
    .footer_box {
        bottom: 0;
        height: 70px;/*according to your height */
        position: absolute;
        width:100%;
        background-color:#23282c;
        position: relative;
        margin:auto;
        min-height:180px;
        z-index:15;
    }

Answer 4

我倾向于使用position:fixed;bottom:0;，然后将margin-bottom:footerHeightInPixels; 添加到页面上的最后一个元素。

正如您所提到的，您希望通过不同大小的视口来改变事物。您可以通过为每个屏幕尺寸使用多个样式表来完成这项工作。例如。

<link rel='stylesheet' media='screen and (max-width: 980px)' href='small.css' /> <link rel='stylesheet' media='screen and (min-width: 981px)' href='big.css' />