Question

我试图在我的页脚之前填写剩下的内容。我在这里找到了很多页面，其中的解决方案似乎合乎逻辑，但似乎无法在我的页面中运行。我无法将我的页脚的位置状态更改为固定或绝对。我目前有一个id为＆＃34; bottomfix＆＃34;的div。我尝试了固定和放大器零解决方案，但也没有工作。

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

Answer 1

添加到您的#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 2

我认为可以用于布局的一种方法是使用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元素中添加更多的flexbox。

Answer 3

您可以尝试使用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 4

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

试试吧。 66px是页脚+标题高度

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

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

example

Div填写页面的其余部分

5 个答案: