CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rygh2014
Rygh2014

Reputation: 135

CSS - Flushed footer to bottom of page

My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).

I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.

This is my code layout - maybe I just made a slight mistake?

<body>
    <div class="navbar navbar-inverse navbar-fixed-top"> 
        // Header Stuff
    </div>

    <div class="container">
        <div class="jumbotron"> 
            // h2
        </div> // end jumbotron

        <div class="row">
            //ALL OF THE INFORMATIONAL CONTENT
        </div> //end row
    </div> //end container

    <footer class="footer">
        //INFORMATION / LINKS
    </footer> //end footer
</body>

and with the name changes to the CSS code...

html, body {
  height: 100%;
}

.container {
  min-height: 100%;
}

.row {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    padding-top:20px;
}

Upvotes: 1

Views: 1128

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

I think, css flexbox can help you in this. But, just beware of browser support.

HTML:

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Click on Toggle Content Button right there to see the difference.

Upvotes: 1

kyawagwin
kyawagwin

Reputation: 96

try this one...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
</style>
</head>

<body>
<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>
</body>
</html>

Upvotes: 0

Related Questions