Question

通过创建一个始终位于页面底部的响应页脚，我遇到了麻烦。我实际使用的代码是：

body
{
    margin: 0 0 200px; //Same height of the footer
}
footer
{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    overflow: auto;
    background-color: rgba(67, 191, 115, 0.95);
}

我用：

<div class='main-content'>
//Content
</div>
<footer>
//Footer content
</footer>

嗯，问题是如果我调整屏幕大小并且内容大于分辨率，页脚会占用一个空格，如下所示： enter image description here

我正在努力解决这个问题。如果我使用position: fixed，问题就会消失，但我不希望页脚跟随滚动。我认为问题在于宽度为100％。这个站点的页脚Stack Overflow可以根据需要运行。如果我调整窗口大小，页脚保持不变，没有空白区域。怎么做到这一点？如何在没有空白区域的情况下使页脚覆盖所有宽度，即使分辨率低于此处出现的页面，在Stack Overflow中也是如此？

Answer 1

试试这个代码......
的 CSS

html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .credit { margin: 20px 0; }

<强> HTML

</ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </nav>  <div class="container"> <div class="page-header"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> </div> </div>   </body> </html>

Answer 2

这是我基于你的html创建的jsfiddle。

这是响应的工作，我告诉你没有任何问题。

我认为可能是height:200px的问题，只需删除并检查。

还有问题，请更新jsfiddle。

Answer 3

你确实应该使用固定定位。这就是我们在应用中所做的事情，在浏览器和Android / iOS设备上运行：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                margin: 0;

                /*
                   This height just to show that the footer stays at the
                   bottom of the page even when scrolling all the way down.
                */
                height:2000px;
            }
            footer
            {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                height: 200px;
                overflow: auto;
                background-color: rgba(67, 191, 115, 0.95);
            }
        </style>
    </head>
    <body>
        <div class='main-content'>
            //Content
        </div>
        <footer>
            //Footer content
        </footer>
    </body>
</html>

当然，您使用的是HTML5，因此该页面不适用于较旧的浏览器（IE7，IE8）。

我希望这会有所帮助：）

Answer 4

我喜欢flexbox。 CSS tricks - Guide to Flexbox 试试这个：

＆＃13;

main {
    height: 95vh;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: center; }
header,
footer  { flex: 0 1 auto; }
article { flex: 10 1 auto; }

＆＃13;

<main>
    <header>Title Here</header>
    <article>Main Article</article>
    <footer>Copyright and Contact Me</footer>
</main>

＆＃13;

Answer 5

感谢Galen Gidman https://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/：

<header class="page-row">
    <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
    <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS：

html,
body {height: 100%;}

body {display: table; width: 100%;}

.page-row {display: table-row; height: 1px;}

.page-row-expanded {height: 100%;}

Galan：到目前为止，我遇到的这个解决方案唯一真正的警告是使用display：table-row的元素存在的样式限制。填充，边距等通常不会按预期运行。这很容易通过在.page-row中添加一个或类似的内容来解决这个问题。

响应的页脚总是在底部

5 个答案: