Html 采用响应性设计的强制页脚底部

我有一个页脚，只有当页面较长时才会粘到底部，但如果页面太短，页脚会粘在页面中间。我见过一些方法，它们设置

margin:0auto-180px.wrapper

类中的code>。然而，这可能是一个问题，因为我的页脚高度根据分辨率（响应设计）而变化。同时设置

.footer

类

位置：固定和
底部：0起作用，但它会与长页面的内容重叠

我的页脚还没有100%完成，我正计划在大屏幕上并排制作每个
.item
类，但在较小的屏幕（如手机）上制作每个
.item
类。这将使页脚高度更长，这就是为什么我在设置高度
.footer
高度和
.wrapper
边距“static”时遇到问题的原因

css:

包装器和主体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;
  
}

footer.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 } ?>


订阅
订阅我们的时事通讯

帮助
需要帮助吗？

你可以找到一个帮助页面。
服务器
关于我们的服务器
|
|
|
|
&抄袭；版权所有| 2015-
尝试设置html和正文的最小高度：

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

页脚是身体的直接产物吗？
我倾向于使用
位置：固定；底部：0然后添加
页边距底部：页脚高度像素到页面上的最后一个元素

正如您所提到的，您希望在不同大小的视口中进行切换。您可以通过为每个屏幕大小使用多个样式表来实现这一点。例如

在您的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;
    }

我经常使用粘性页脚，它是
position:absolute（例如，
高度：120px；
）。内容区根据页脚高度设置一个
填充底部
，以防止重叠

在移动模式下，页脚从
位置更改为：绝对至<代码>位置：相对，高度现在为
高度：自动。还必须从内容区域中删除
填充底部

#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，
身体{
保证金：0；
身高：100%；
}
#页面{
位置：相对位置；
最小高度：100%；
溢出：隐藏；
}
#标题{
高度：50px；
背景：黄色；
}
#内容{
填充底部：60px；
}
#页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：60px；
背景：黑色；
颜色：白色；
}
@介质（最大宽度：400px）{
#内容{
填充底部：0；
}
#页脚{
位置：相对位置；
底部：自动；
左：自动；
高度：自动；
}
}

小内容
页脚内容
不，没用。用两个
位置尝试：相对和
位置：固定
但是这两个workedOP都不需要灵活的高度粘滞页脚。你应该用谷歌搜索灵活的高度粘滞页脚。和以前一样的问题，它粘在底部（就像给fotter一个固定的位置和底部：0；），但是重叠了。包装器类在我的电脑和手机上测试后，它认为这是最好的解决方案。我已经有了一个css，在那里我可以根据分辨率改变类，这样我就可以轻松地将它添加到那里。谢谢
#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;
    }
}