Question

我在这里发现了其他帖子，但没有人对这个问题有任何解释。以下是我所说的基本示例：https://jsfiddle.net/p1e5krn6/。

HTML

     <nav>
         <ul>
             <li>About</li>
         </ul>
     </nav>
 </header>

 <div id="content">
    Lorem ipsum dolor sit amet.
     <div id="one">asdasd</div>
     <div id="two">asdasdasd</div>
 </div>

 <footer>footer</footer>
</body>

CSS html，body { 身高：100％; 背景颜色：黄色; }

header,footer{ background:blue; }

header {
    width: 100%;
    height: 100%;
}

header nav ul li {
    display: inline-block;
    padding: 0 30px 0 0;
}

#content {
    background-color: pink;
    width: 60%;
    height:100%;
    margin: 0 auto;
}
#one, #two {
    height:100%;
}

footer {
    width: 100%;
}

我真正想知道的是为什么这个页脚会这样上升。我知道如何解决问题，我可以将页脚放在内容div中，但这在语义上是错误的。我想要的不是一个解决方案，而是一个可以解释我这个页脚行为的理由。

Answer 1

这种情况正在发生，因为您已将100% height提供给div #one和#two以及100％的内容高度。从逻辑上讲，如果它们只是内容的一部分，那么为什么还要给出完整的高度。从这两个div中删除该属性可以解决问题。请看小提琴：“https://jsfiddle.net/p1e5krn6/1/”

删除以下样式：

#one, #two{
    height:100%;
}

Answer 2

你可以试试这个吗？ demo

*{
float:left;
   }

页脚符合父div高度100％

2 个答案: