DIV高度100％使页面具有滚动

Question

我有以下结构：

<header></header>
<nav></nav>
<section id="mainContainer">
<section id="innerContainer">
</section>
</section>
<footer></footer>

和以下CSS：

html {
    height: 100% !important;
}
body {
    height: 100% !important;
}
body header {
    min-width: 1280px;
    height: 78px;
}
body nav {
    height: 41px;
}
body section#mainContainer {
    height: 100%;
}
body section div#innerContainer {
    height: 100%;
}
body footer {
    height: 48px;
}

主要目标是 - 制作粘页。但是CSS Config这样的只能使滚动显示在我的页面上。我 ve already tryed all possible variations of making sticky footers, but all of them gave me the same result. What I m做错了。

Answer 1

您因为这些

而获得滚动

body section#mainContainer {
    height: 100%;
}
body section div#innerContainer {
    height: 100%;
}

您正在添加一个标头，导航和页脚，这会导致页面增加高度，即100％ 78px 41px 48px;

如果您需要一个粘页的页脚，那么比瑞安·菲特（Ryan）的粘性页脚

Answer 2

使用为页脚修复了

body footer {
  position: fixed;     
  right: 0;
  left: 0;  
  bottom: 0;    
}