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's sticky footer

Answer 2

使用固定的页脚

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

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

2 个答案: