How to match footer and min-height = 100% using standard container bootstrap?

D

DennyD3142017-01-24 17:30:38

css

DennyD314, 2017-01-24 17:30:38

Hello!
I am using bootstrap. I put navigation, content and footer in a standard container.
The goal is to have a page with left and right padding, where the pattern will peek out from, and the page itself will have a minimum screen height and a pressed footer. I would not like to use vh and even more so to calculate the height using jquery. In principle, there is a solution with jquery, but I would like to make everything prettier. I've been scratching my head for a day, something is constantly leaving, then the footer is in the middle of the screen with a long page, then the block with content is cut off according to the content instead of going down ..
Actually the code. The option when the footer hangs in the middle with a long page:

<body>
<div id="center" class="container" >
            <nav role="navigation" class="navbar navbar-default navbar-inverse "> </nav>
            <div class="content"></div>
            <div class="footer">
                <p> Powered by DJANGO 1.10.3 </p>
            </div>
</div>

CSS:

body, html {min-height: 100%;height: 100% ;}

html {
  position: relative;
  overflow-y: scroll;
}


body {
font-family: "PT Sans";
background: #FFFFFF;
color: #2F4F4F;
font-size: 150%;
background: url("../images/foggy_birds.png") repeat;
}


#center {
    padding-left: 0;
    padding-right: 0;
    background: #FFFFFF;
    min-height: 100%
}


.footer {
  position: absolute;
  bottom: -100px;
  height: 60px;
  background-color: rgba(112, 128, 144, 0.1);
  color: #999999;
width: inherit;
}

.content{
    padding-left: 16px;
    padding-right: 16px;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

DennyD314, 2017-01-25
@DennyD314

Resolved like this:

<html>
<head></head>
<body>
<div id="center" class="container" >
    <nav role="navigation" class="navbar navbar-default navbar-inverse "></nav>
    <div class="content">
        <div style="clear:both;"></div>
     </div>
    <footer><p class="text-center">Powered by DJANGO 1.10.3</p></footer>

html,
body,
#center {
  height: 100%;
}


html {
  min-height: 100%;
  overflow-y: scroll;
}



body {
font-family: "PT Sans";
background: #FFFFFF;
color: #2F4F4F;
font-size: 150%;
background: url("../images/foggy_birds.png") repeat;
min-height: 100%;
}


#center {
    padding-left: 0;
    padding-right: 0;
    background: #FFFFFF;
    position: relative;
}


.content{
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  min-height: 100%;
  height: auto;
  padding-bottom: 90px;
  background: inherit;
}


footer {
  height: 80px;
  margin-top: -80px;
  background-color: #1b6d85;
}

E

Egor Zhivagin, 2017-01-24
@Krasnodar_etc

The option is to switch to html5 with the footer tag, which lies quietly at the bottom of the page.
Or #content { position: relative }
and footer bottom: 0px
And remove the terrible relative for html )