css 响应式页脚始终位于底部

zzlelutf 于 2022-12-15 发布在其他

关注(0)|答案(5)|浏览(154)

我在创建一个总是停留在页面底部的响应式页脚时遇到了麻烦。我实际使用的代码是：

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>

嗯，问题是，如果我调整屏幕大小和内容是大于分辨率页脚让一个白色，像这样：

我正在尝试解决这个问题。如果我使用position: fixed，问题就消失了，但是我不希望页脚跟随滚动。我认为问题出在100%的宽度上。这个网站的页脚，堆栈溢出，可以按照我的需要工作。如果我调整窗口大小，页脚保持不变。没有白色。2如何实现这个？3如何使页脚覆盖所有的宽度而不让空白，即使分辨率低于页面，就像这里发生的，在堆栈溢出？

css

来源：https://stackoverflow.com/questions/30815220/responsive-footer-always-in-bottom

5条答案

按热度按时间

sg2wtvxw1#

尝试此代码....

中央支助组

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;
}

超文本标记语言

</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><!-- /.navbar-collapse -->
</nav>

      <!-- Begin page content -->
      <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><!-- Wrap Div end -->

    <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>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

赞(0）回复(0）举报 2022-12-15

rhfm7lfc2#

这个jsfiddle是我根据你的html创建的。
这是工作的React，我没有看到任何问题，因为你告诉。
我想可能是height:200px的问题，只是删除和检查。
仍然有问题，请更新jsfidle。

赞(0）回复(0）举报 2022-12-15

pu3pd22g3#

你确实应该使用固定定位。这是我们在浏览器和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）上运行。
希望这对你有帮助：）

赞(0）回复(0）举报 2022-12-15

egmofgnx4#

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

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; }

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

赞(0）回复(0）举报 2022-12-15

nwlqm0z15#

感谢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的元素存在的样式限制：表行。通常填充、边距等行为不符合预期。这很容易解决，只需在.page-row中添加一个或一些内容并设置其样式即可。

赞(0）回复(0）举报 2022-12-15

我来回答

css 响应式页脚始终位于底部

5条答案

相关问题

热门标签

最新问答