html - 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 配置只会让滚动出现在我的页面上。我ve already tryed all possible variations of making sticky footers, but all of them gave me the same result. What I做错了。

Answer 1

由于这些，您正在滚动

body section#mainContainer {
    height: 100%;
}

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

你正在添加一个页眉、导航和页脚，这会导致页面增加高度，即 100% + 78px + 41px+ 48px；

如果你需要一个粘性页脚而不是ryan fait 的粘性页脚

Answer 2

为您的页脚使用固定

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