CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

前端未结

关注

 29  2488

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can\'t make sit at the bottom of the page.

I wa

相关标签:

29条回答

春和景丽

2020-11-22 00:19
Just set the html, body, and the other rows except the footer to 100%. e.g
```
<body>
<header></header>
<content></content>
<footer></footer>
```
the css becomes
```
html, body, header, content{
height:100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

闹比i

2020-11-22 00:21

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

So using best practices from various sources I came up with this solution:

http://jsfiddle.net/vfSM3/248/

The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

here is a simple css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}

0 讨论(0)

慢半拍i

2020-11-22 00:22
Do this
```
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
```
You can also read about flex it is supported by all modern browsers

Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div
```
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}
```
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Do keep in mind it is not supported by older versions of IE.
0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2020-11-22 00:23

A simple solution that i use, works from IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

0 讨论(0)

星月不相逢

2020-11-22 00:23

Just customize the footer section

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>

0 讨论(0)

青春惊慌失措

2020-11-22 00:23

What I did

Html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

css

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

Dont need to use position fixed and absolute. Just write the html in proper way.

0 讨论(0)