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

前端未结

关注

 29  2486

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:13

I have used in my many projects and never got any single issue :)

for your reference, Code are in snippet

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>

0 讨论(0)

佛祖请我去吃肉

2020-11-22 00:16
One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.

What I've used, and has worked well on desktop and mobile, is:
```
<body>
    <div id="footer"></div>
</body>
```
with
```
body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

误落风尘

2020-11-22 00:16

Some solutions didn't work for me but the best option I found was the example below when i decided to use the flex option.

html, body{
    height: 100%;   
}

body{
    display: flex;
    flex-direction: column;
}

.main-contents{ 
    flex: 1 0 auto;
    min-height: 100%;
    margin-bottom: -77px;
  background-color: #CCC;
}

.footer{
    height:  77px;
    min-height: 77px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #000000;
    flex-shrink: 0;
    flex-direction: row;
    position: relative;
    
    
}

.footer-text{
  color: #FFF;
}

@media screen and (max-width: 767px){
    #content{
        padding-bottom: 0;
    }
    .footer{
        position: relative;
        /*position: absolute;*/
        height: 77px;
        width: 100%;
        bottom: 0;
        left: 0;
    }

}

<html>
  <body>
    <div class="main-contents" >
      this is the main content
    </div>
  </body>

  <footer class="footer">
    <p class="footer-text">This is the sticky footer</p>
  </footer>

</html>

0 讨论(0)

时光说笑

2020-11-22 00:17
It's actually very simple. This solution doesn't require to know footer height.
```
<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>
```
```
.app {
  min-height: 100vh;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
无人共我

2020-11-22 00:18
A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:
```
footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
死守一世寂寞

2020-11-22 00:18
What about that:
```
<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...