内容短缺或丢失时如何将页脚推到页面底部？

时间：2011-01-01 21:18:50

标签： css html

我有一个包含标题，内容和页脚div的外部div的页面。我希望页脚div能够拥抱浏览器的底部，即使内容div不够高，无法填充可视区域（即没有滚动）。

16 个答案:

答案 0 :(得分：28)

使用flexbox可以轻松解决您的问题。只需将.container和.footer包裹在高度最低为100vh的flex容器中，将方向切换为column，使它们堆叠在一起，并用两行之间的空格对齐内容，以便footer移至底部。

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between
}
<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

答案 1 :(得分：14)

我想要的是只要内容不够长以填满浏览器窗口（非粘性），页脚就位于浏览器视图的底部。

我能够通过使用CSS函数calc（）来实现。所有现代浏览器都支持这种功能。您可以使用：

<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>

css：

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

将186更改为页脚大小。

答案 2 :(得分：9)

示例：http://jsfiddle.net/AU6yD/ 

html, body { height: 100%; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}

body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }
<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="push"></div>
</div>
<div id="bottom">
    <div id="footer">
        Footer
    </div>
</div>

答案 3 :(得分：7)

我做了Jahmic up top做的事情（不会让我发表评论），除了我不得不使用VH代替％，因为我不能将它应用到容器类。 

#inner-body-wrapper
{
    min-height: 70vh;
    min-height: -webkit-calc(100vh - 186px);
    min-height: -moz-calc(100vh - 186px);
    min-height: calc(100vh - 186px);
}

答案 4 :(得分：5)

虽然这个问题很老，但我想在 great answer by Luke Flournoy 上稍微改进一下。

Luke 的答案仅在包装中有两个元素时才有效。至少有 3 个是很常见的：页眉、主要内容和页脚。有了这三个元素，Luke 的代码会将它们垂直均匀地间隔开——很可能不是你想要的。对于多个元素，您可以这样做：

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.footer {
  margin-top: auto;
}
<div class="flex-wrapper">
  <div class="header">The header</div>
  <div class="content">The content</div>
  <div class="footer">The footer</div>
</div>

答案 5 :(得分：3)

使用带有flex-grow：1的空白div填充页脚前的未使用空间。

<body style="min-height: 100vh; display: flex; flex-direction: column;">

  Any content you want, 
  put it here. Can be wrapped,
  nested, whatever.

<div style="flex-grow:1"></div>

<!-- Any content below this will always be at bottom. -->

<footer>Always way at the bottom</footer>
</body>

根据需要将样式提取到CSS。通过将设置为display：flex;

答案 6 :(得分：3)

您可以使用Flexbox完全按照自己的意愿进行操作，例如：

html, body {
    height: 100%;
    width: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content {
    flex-grow: 1;
}

作为注释，页脚必须在 content 元素

之外

html结构如下：

<html>
    <body>
        <div class="wrapper">
            <header></header>
            <div class="content">
                <!-- Content -->
            </div>
            <footer></footer>
        </div>
    </body>
</html>

答案 7 :(得分：2)

为了使其在移动设备上的页脚比桌面更高时响应性地工作，您无法真正知道页脚高度。一种方法是将页脚拉伸以覆盖整个屏幕。

html,
body {
  height: 100%;
}

.container {
  min-height: 80%;
  background-color: #f3f3f3;
}

.footer {
  background-color: #cccccc;
  box-shadow: 0px 500px 0px 500px #cccccc;
}
<div class="container">Main content</div>
<div class="footer">Footer</div>

答案 8 :(得分：0)

我试过了http://jsfiddle.net/AU6yD/，因为这是最好的选择，但当<div id="wrapper">的内容开始过大时，我遇到了问题 evidence.png，我为解决这个问题所做的就是每当我改变div的内容时刷新身体大小：

var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
   var height = Math.max( body.scrollHeight, body.offsetHeight,
                          html.clientHeight, html.scrollHeight, 
                          html.offsetHeight );
   body.style.height = height + "px";
}, 500);

答案 9 :(得分：0)

尝试使用此codepen.io/dendii/pen/LLPKJm媒体响应

＆＃13;
＆＃13; 
html, body {
  color:#fff;
}
.wrapper{
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
}
.main{
  width:100%;
  overflow:hidden;
}
.main-inner {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
article,aside{
  float:left;
  padding:20px 10px;
}
article{
  width:70%;
  background:darkred;
}
aside{
  width:30%;
  background:darkblue;
}
.top {
  padding:20px 10px;
  height:100%;
  background:darkgreen;
}
.bottom,.text-mid {
  padding:20px 10px;
  height:100%;
  background:darkorange;
}
.text-mid {
  margin-top: auto;
  background:darkgrey;
}
@media (max-width: 768px){
  .main-inner{
    display: block;
  }
  article,aside{
    width:100%;
    float:none;
    display: block;
  }
}
＆＃13; 
<div class="wrapper">
    <header class="top">
      <h1>Header</h1>
    </header>
<div class="main"><div class="main-inner">
  <article>
    blank content
  </article>
  <aside>
    class sidebar
  </aside>
</div></div>
<div class="text-mid">
    <div class="center">
        Whatever you want to keep.
    </div>
</div>
<footer class="bottom">
    <div class="footer">
        Footer
    </div>
</footer>
 </div>
＆＃13;
＆＃13;
＆＃13;

另一种选择，如果您希望主包装器调整屏幕EqualHeight

答案 10 :(得分：0)

我用jquery

解决了同样的问题 
    var windowHeiht = $(window).height();
    var footerPosition = $("#asd-footer").position()['top'];

    if (windowHeiht > footerPosition) {
        $("#asd-footer").css("position", "absolute");
        $("#asd-footer").css("bottom", "0");
        $("#asd-footer").css("width", "100%");
    }

答案 11 :(得分：0)

重新编写jQuery解决方案。我有它调整窗口大小。当窗口大于页面时，页脚样式的位置是“绝对”固定在窗口的底部。当窗口小于页面时，页脚停留在页面底部 - 从底部滚动。

<style>
    .FooterBottom {
        width:100%;
        bottom: 0;
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        FooterPosition();

        $(window).resize(function () {
            FooterPosition();
        });
    });

    var originalFooterBottom = 0;

    function FooterPosition() {
        var windowHeight = $(window).height();
        if (originalFooterBottom == 0) {
            var footer = $("#Footer");
            originalFooterBottom = footer.position()['top'] + footer.height();
        }

        if (windowHeight > originalFooterBottom) {
            var footerElement = document.getElementById("Footer");
            if (!footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.add('FooterBottom');
            }
        }
        else {
            var footerElement = document.getElementById("Footer");
            if (footerElement.classList.contains('FooterBottom')) {
                footerElement.classList.remove('FooterBottom');
            }
        }

    }
</script>

我尝试了很多只有样式的解决方案，但没有一个能够工作。这个Javascript / Style解决方案对我来说效果很好，即使它有奇怪的jQuery和GetElement混合。

感谢Asad的职位。

答案 12 :(得分：0)

body{
    position:relative;
    min-height:100vh;
}
footor{
     position:absolute;
    bottom:0%;
    width:100vw;
}

答案 13 :(得分：0)

用一个类包裹你的页脚，如下所示：

<div class="footer">
<h1>footer content</h1>

然后将以下css属性添加到页脚：

.footer{
position: fixed;
bottom: 0;

}

答案 14 :(得分：0)

我刚刚将位置更改为粘性并将顶部设置为 100%。然后我转到其父块并将其最小高度设置为 100% 这解决了我的问题。

在我的例子中，父块是 body，所以我改变了 body 的最小高度。

.footer {
position: sticky;
top: 100%;
text-align: center;    
width: 100%;
height: 60px;
background-color: #1abc9c;}


body{
margin:0;
padding:0;
min-height:100vh;}

答案 15 :(得分：-1)

我试过这个，到目前为止工作正常

position:absolute;
bottom:0;
width:100%;

或

position:absolute;
bottom:0;
left:0;
right:0;
相关问题
最新问题