Div 填充页面的其余部分

Question

我正在尝试在页脚之前填充我的其余内容。我在这里找到了许多页面，其中的解决方案似乎合乎逻辑，但似乎不适用于我的页面。我无法将页脚的位置状态更改为固定或绝对。 我目前有一个 id 为“bottomfix”的 div。我尝试了固定和归零的解决方案，但这也不起作用。

我邀请您查看我的biopage，我正在处理的 css 是标题为 style.css 的最后一张表。

Answer 1

我认为适用于您的布局的一种方法是使用 flexbox。我实际上是为我自己的一个项目(example) 这样做的。这是最好的解决方案，因为您的页脚和其他内容可以具有动态高度。

一般 HTML 结构：

<body>
  <main>
    Header and page content go here...
  </main>
  <footer>
    Footer...
  </footer>
</body>

重要的是要包含许多不同的前缀和后备，以使其在所有浏览器中都能正常工作（我在 Chrome、FF、IE 和 Safari 的多个版本中对其进行了测试）。

CSS：

body {
  display: box;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

main {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

footer {
  margin-top: 32px; // Whatever space you want between content and footer.
  -webkit-box-flex: 0 1 auto;
  -moz-box-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

如果您想控制.bottomfix div 的大小，可以在main 元素中添加更多弹性框。

Answer 2

添加到您的#footer 类position: fixed; 然后添加位置bottom: 0px;，它将在底部

#footer {
    border-width: 5px;
    bottom: 0;
    padding: 6px 0 7px;
    position: fixed;
    width: 100%;
}

如果您希望仅当您的页面没有足够的内容来填充页面时才将页脚固定到页面底部，请将此脚本添加到 <body> 结束标记之前

<script type="text/javascript">
if(jQuery('header:first').height()+
   jQuery('main:first').height()+ jQuery('footer:first').height() >  jQuery(window).height()){ 
   $('#footer').css({position: 'fixed', bottom: '0px'});
}
</script>

这个脚本将在加载时检查您的页面是否需要固定页脚:)

或者你可以添加它

$(document).ready(function(){

  //code

});

Answer 3

#footer {
  border-top: 1px solid #000;
  background: #222;
  color: #7B7B7B;
  font-size: 13px;
  position: absolute;
  z-index: 100;
  clear: both;
  padding: 10px 0;
  bottom: 0;
}

这对我有用，我将位置设置为绝对并设置 bottom:0; 以强制 div 到浏览器底部

Answer 4

您可以尝试使用 CSS3 calc 函数。像这样：

main{
    min-height: 100%; /*fallback if browser doesn't support calc*/
    min-height: ~"calc(100% - 330px)"; /*330px comes from 270px <header> plus 60px <footer>*/
}

您只需将 <header> 和 <footer> 高度值计算替换为您的。

还要确保你有这样的东西：

html, body{
    height:100%;
}

Answer 5

试试这个。 66px 是页脚 + 页眉高度

html, body, #page, #bottomfix, main > div {
    height: 100%;
}

main {
    height: calc(100% - 66px);
}