将div的高度调整为屏幕高度，并将footer固定到底部 [英] Fit height of div to screen height and fix footer to bottom

问题描述

我有一个网站，当没有足够的内容时，页脚向上移动，不会粘到底部。我试图找出如何使页脚和标题之间的div扩展到可用空间，以便页脚保持在底部，而不是这样：

I have a site where when there isn't enough content the footer moves up and doesn't stick to the bottom. Im trying to figure out how to make the div between the footer and the header stretch to the available space in order for the footer to remain at the bottom and not look like this:

尝试设置我的高度到100％，但不工作。

I've tried setting my heights to 100% it but does not work.

HTML：

<div id="wrapper">

    <div id="body_div">
        <section id="main_section">
        </section>
        <aside id="sidebar">                    
        </aside>
    </div>
    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>
</div>

CSS：

body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    -moz-box-pack:center;
    box-pack:center;
    background:url('images/bg/bg9.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
#wrapper{
    max-width: 850px;
    display: -moz-box;
    display: -webkit-box; /*means this is a box with children inside*/
    -moz-box-orient:vertical;
    -moz-box-flex:1;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
    background: rgba(0,0,0,0.7);
    height:100%;    
    z-index: 1;
}
#body_div{
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    display: -moz-box;
    -moz-box-orient:horizontal;
    color:#000000;
    margin-top: 190px;
    height: 100%;
}
#main_section{
   /* border:1px solid blue;*/
    -webkit-box-flex: 1; 
    -moz-box-flex:1;
    margin: 20px;
    padding: 0px;
    height:100%;
    width: 100%;
}

这是我的网站 http://www3.carleton.ca/clubs/sissa/html5/video.html
您可以看到我的意思是当你使用侧边菜单进入宽屏模式。

This is my site http://www3.carleton.ca/clubs/sissa/html5/video.html You can see what I mean when you go to widescreen mode using the side menu.

推荐答案

你其实真的靠近答案。然而，你不能简单地设置 #wrapper div到100％的高度。您应该包括此行：

You're actually really close to the answer. However, you cannot simply set only the #wrapper div to 100% height. You should include this line:

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

目前，问题是 code> div没有线索什么是100％。它需要一个来自 html 和正文元素的父元素。

Currently, the issue is that the wrapper div has no clue what is 100%. It needs a parent with a defined height, which comes from the html and body elements.

对于粘性页脚，只需使用绝对定位并设置 bottom：0px; 。不要使用第三方API;使用 position：absolute 是一个很容易解决的问题，添加第三方API只会减慢您的网站速度。

As for the sticky footer, just use absolute positioning and set bottom:0px;. Don't use a 3rd party API for this; using position:absolute is a ridiculously easy fix, and adding a 3rd party API will just slow down your site.

这篇关于将div的高度调整为屏幕高度，并将footer固定到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！