CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michal Takáč
Michal Takáč

Reputation: 1055

Footer should stay on bottom

I have some problem with my template. I want to create simple header, horizontal navigation, vertical navigation and content template with footer on the bottom of the page. Menu should be stretched to the beginning of the footer, and footer should be on the whole bottom of the page, but not with fixed position and scrolling down with the content, but under the content, so when the content is so long, footer is not visible until you scroll down to the bottom of the page.

This is working, when there is enought of content, but when there are just 2 lines, footer will jump under menu, like this:

enter image description here

How can I put this footer on the bottom even when there is not enought of context and in the same time dont make it fixed, so it will not scroll with the content?

Here is the code:

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
<div class="container-fluid">
        <div class="row">
            <header class="col-sm-12 col-md-12 col-lg-12 bordered header"> <!-- Header -->
                Header
            </header> <!-- End of header -->
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
                Menu horizontal
            </div><!-- End of horizontal menu -->
        </div>
    </div>
<div class="contentus">
        <div class="site-container">
                <div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu -->
                    <menu role="menu">
                        Menu vertical
                    </menu>
                </div> <!-- End of vertical menu -->
                <div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content -->
                    Content

                    Combine Like Files

                    One way, and perhaps the easiest way, to reduce the number of HTTP requests is to combine like files. Specifically, combine all of the CSS files into one and all of the JavaScript files into one. Combining these files then compressing them creates one, hopefully small, HTTP request.

                    <!-- Bad -->

                    <!-- Good -->
                    In general, the CSS for a web page should be loaded at the beginning of the document within the head, while the JavaScript for a web page should be loaded at the end, just before the closing body tag. The reason for these unique placements is because CSS can be loaded while the rest of the website is being loaded as well. JavaScript, on the other hand, can only render one file at a time, thus prohibiting anything else from loading. One caveat here is when JavaScript files are asynchronously loaded after the page itself is done rendering. Another caveat is when JavaScript is needed in helping render the page, as such the case with the HTML5 shiv.

                    Image Sprites


                </div> <!-- End of content -->
        </div>
    <footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer -->
        Footer
    </footer> <!-- End of footer -->
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

style.css

.bordered {
    border: 1px solid black
}

.footer {
    position: static;
    z-index: 10;
    background-color: red;
    bottom: 0;
    height: 50px;
    display: block;
}

.content {
    position: relative;
    float: right;
    height: 100%;
    display: block;
}

.header {
    height: 67px;
}

.menu-vertical {
    position: absolute;
    background-color: #aaa;
    float: left;
    height: 100%;
}

.site-container {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.site-container > .row:first-of-type {
    height:100%;
}

.menu-horizontal {
    height: 18px;
}

Upvotes: 0

Views: 173

Answers (2)

ismnoiet
ismnoiet

Reputation: 4169

change the position of the footer parent to relative and footer position to fixed and footer bottom to 0px like this :

.contentus{
   position:relative;
}

.footer{
  position:fixed;
  bottom:0px;
  width:100%; //if you want it to take the document width
 }

Upvotes: -1

sticksu
sticksu

Reputation: 3738

You can find a css solution here: http://css-tricks.com/snippets/css/sticky-footer/

Upvotes: 3

Related Questions