CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3heightstretch
Thomas Stubbe
Thomas Stubbe

Reputation: 2004

CSS: how to use min-height decently

I'm stuck on a stupid CSS problem, which has been asked a 100 times, but never has been decently answered, or at least not for my problem.

I got a page with a footer, and with a side bar in bootstrap 3.3.7. The problem I'm having is that it seems impossible to set the min-height of the page to 100%. So I want a page, where the footer is always at the end of the page, and the page is minimum the screen height (100%) this is achieved by setting min-height to 100%, works like a charm. The problem is that inside the page there is a wrapper which needs to stretch to at least the height of the page. This is achieved by using the padding hack: padding-bottom: 99999px; and margin-bottom: -99999px;.

However, this only works in Chrome. In all other browsers, you can scroll down for 99999 pixels. To prevent this, I added overflow: hidden, but this makes that the min-height is not 100% anymore. I've added min-height everywhere, but apparently, if you don't specify the height of the parent, it does not work.

So what I'm looking for is for a way to make min-height propagate without setting height (because setting height breaks everything of course).

In the fiddle below I demonstrated to problem, I want the background-color of the red and the green both fill the entire height, while the footer stays at the bottom.

https://jsfiddle.net/wc9yh243/5/

HTML:

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV class="wrapper"> 
<DIV class="width50 green">
<DIV class="content">
<DIV class="text">
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
some <br/>
text <br/>
which is longer than <br/>
the page<br/>
</DIV>
</DIV>
</DIV>
<DIV class="width50 red">
<DIV class="content">
<DIV class="text">
some text which is shorter than the page
</DIV>
</DIV>
</DIV>
<DIV class="footer">
Some footer
</DIV>
</DIV>
</BODY>
</HTML>

CSS:

html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
}

.width50 {
  min-height: 100%;
  width: 49%;
  display: inline-flex;
}

.content {
  min-height: 100%;
}

.green {
  background-color: #AAFFAA;
}

.red {
  background-color: #FFAAAA;
}

.footer {
  bottom: 0;
  height: 45px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
  background-color: grey;
}

Upvotes: 0

Views: 1556

Answers (3)

Phil
Phil

Reputation: 19

Using bootstrap you could create a basic grid where both divs are in the same container and row like so. In this case the container with less text will always be the same size as the green one no matter its content.

HTML:

<div class="container">
 <div class="row">
  <div class="col-6 red">red and more text red and more text red and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more textred and more text</div>
   <div class="col-6 green">green</div>
  </div>
 </div>

CSS:

.red {
  background-color:red;
}

.green{
  background-color:green;
}

https://codepen.io/PMertgen/pen/KGRBbp

Upvotes: 0

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

use display:flex to the clss .wrapper as shown below:

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
  display:flex;/*newly added css*/
}

Upvotes: 1

Brij
Brij

Reputation: 6122

Add display:flex in wrapper css class:

.wrapper {
  position: relative;
  min-height: 100%;
  padding-bottom: 45px;
   display: flex;
}

Upvotes: 1

Related Questions