当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Why height 100% doesn't work for the content?

问题描述:

In this code I have a sticky footer and a content section above, but why height:100% doesn't work for content section?

html {

position: relative;

min-height: 100%;

}

body {

margin-bottom: 60px;

height: 100%;

}

.content {

background-color: #116655;

height: 100%;

}

.footer {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 60px;

background-color: #ffcc44;

}

<div class="content">

<div>content</div>

</div>

<footer class="footer">

My footer

</footer>

网友答案:

You need to set an actual height on the html

html {
 position: relative;
  height: 100%; /* not min-height */
}

JsFiddle Demo

网友答案:

Use position: absolute on the content as well, then use top: 0 and bottom: 60px this will make the content take up the remaining space. then use overflow: auto; to allow scrolling the content;

(Demo)

.content {
    position: absolute;
    top: 0;
    bottom: 60px;
    background-color: red;
    overflow: auto;
}
网友答案:

It seems that you don't really need to have the background on .content, it can be added into html or body tag instead. And don't forget to reset the left and right margin on the body tag.

The reason that height:100% doesn't work on .content is - you'll also need to set a fixed for percentage height to all the parent containers, which are body and html, but the sticky footer will break if you do it that way. There are other ways making the layout such as using css flex or table if you want to. Feel free to comment.

http://jsfiddle.net/ox0pvbj7/

html {
    position: relative;
    min-height: 100%;
}
body {
    background-color: #116655;
    margin: 0 0 60px;
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #ffcc44;
}
<div class="content">
    <div>content</div>
</div>
<footer class="footer">
    My footer
</footer>
分享给朋友:
您可能感兴趣的文章:
随机阅读: