Min-height 90% not functioning

HTML & CSS
1

I am just experimenting in a site and I can’t get a 90% min-height div to work. This is the CSS I am using:


* { /* for demo only */
margin: 0;
padding: 0
}

html, body {
 width: 100%;
 height: 100%; 
}

body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #222;
	font-size: 100%;
}

#wrapper {
 width: 100%;
 height: 90%;
 line-height: 90%;
 margin: 5% auto;
 position: relative;
 z-index: 1;
 background: red;
}

* html #wrapper { 
	height: 90%; 
}

And this is the URL

As you can see will the 90% min-height of the wrapper along with the top and bottom margin of 5% will add up to 100%! But still do I get a scroll!

What am I doing wrong,

Thank you in advance

2

Hi,

The 1px top and bottom margin on the wrapper makes the element 2px to big and you get a scroll.


#wrapper {
	min-height: 300px;
	height: 90%;
	margin: 100px auto;
	background-color: red;
[B]	margin: 1px;[/B]
}

Change it to margin:0 1px and the scroll will disappear.

If you are trying to make a sticky footer then I suggest the display:table method (ie8) mentioned in the CSS faq is the way to go these days.

3

Hi Paul. After writing the message I was still trying all kind of things. I am now back on how I would like to accomplish:


#wrapper {
	min-height: 300px;
	height: 90%;
	background-color: red;
	margin: 5% 0;
}

So why is it that I get a scrol? (90% + 2 x 5% = 100%)

4

Hi,

It’s because percentage margin always refers to the width of the element. It does not mean 5% of the height.

If you can clarify what you are trying to do there may be better ways to do this.

Why do you need a gap at the top and bottom?

5

Hi Paul. Thank you for the reply and explanation. It is more that I do some experiments because I am still struggling with the height property in a responsive design. With the display:table method, do you refer to the post started by felgall?

Edit: I actually found your old demo where you use the display table method:

http://www.pmob.co.uk/temp/sticky-footer-vertical-center2.htm

and I used that method myself before, but I would like to avoid to use a fixed height for the header and footer, but then, logically, I don’t have a reference to use for the negative top margin of the outer div and the padding of the content div. What would be my best option


#outer {
	margin:-150px auto 0;/* header plus footer height */
	height:100%;
	display:table;
}
#header {
	height:70px;
	position:relative;
	z-index:2;
	border-bottom:20px solid #fff;
}
#footer {
	height:40px;
	clear:both;
	border-top:20px solid #fff;
}

#content {
	vertical-align:middle;
	display:table-cell;
	padding:150px 0 0;
}
6

donboe, I’m pretty sure this is the modern version of the sticky footer that Paul was suggesting:

http://www.pmob.co.uk/temp/sticky-footer-auto-height.htm

Or possibly this one:

There are no fixed heights in the header or footer.

7

Yes that’s the ones. Thanks Ron.

8

Thank you indeed Ron. That is indeed close to what I’m looking for. I only would like to align the content div (in the last example main) vertically as well like in this example, where I used Paul’s old demo! What do I need to adjust to accomplish that. I can’t get my head around the display: table, display: table-cell part

9

Hi,

Do you mean something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Sticky footer IE8+</title>
<style type="text/css">
html, body {margin:0;	padding:0;	height:100%;}
body {display:table;width:100%}
.content { background:#ccc; }
.main{display:block}
header {	background:#999;	color:#fff;	text-align:center;	padding:10px 0}
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique */
header, .footer{height:1px}
h1{padding:10px;margin:0;}
.footer {background:#999;	color:#fff;	text-align:center;}
.footer p {	margin:0;	padding:10px}

/* vertically align center content */
.inner-content{display:table-cell;vertical-align:middle}
.vertical{
	width:50%;
	background:rgba(255,255,255,0.4);
	margin:auto;	
}

</style>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<header><h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1></header>
<main class="content">
	<div class="inner-content">
		<div class="vertical">This is the inner content This is the inner content This is the inner content This is the inner content This is the inner content This is the inner content This is the inner content This is the inner content </div>
	</div>
</main>
<footer class="footer"><p>Sticky footer</p></footer>
</body>
</html>

Or perhaps something like this.

10

Hi Paul that is indeed what I mean, but what is confusing me somehow is the use of main and .main(class). In the HTML I don’t see a class main? Specially becausse of this property:

.main{display:block}
11

Ah ok, that’s a typo :slight_smile:

It should be :


main{display:block}

The above rule is for Ie7 and under as they don’t understand display:table-row and just get the new html5 (main) element as a block element instead.

It really should be:


header, .footer, main { display:block}
header, .footer, main { display:table-row }
12

Ha great :tup: One last one. Can I also use footer instead of .footer(class)

13

Yes you can use the ‘footer’ element as the selector but bear in mind that html allows multiple footer elements so globally styling the footer element is a bit like globally styling ‘div’. The footer (and header) element can be used many times to create structure within sections and do not only apply to the top and bottom of a page. (Although, why they (html5 authors) did this is beyond me as no one ever used them that way before and they said they added these elements because people were using them already.)

Of course if you only have one ‘footer’ element in the page and you know you aren’t going to use another one then it will be ok.

14

Hi Paul. Thank you so much. This is a real eye openerer :tup: I made a few adjustments so I get the two columns as I needed. Things start to get much clearer now

Site with adjustments

15

Oops I have a problem in Chrome. At least I see the header at about 150 px from the top?

16

Hi,

Interesting bug :slight_smile:

Seems you have run into this jquery bug which they apparently won’t fix and stops the body element from ever being display:table in webkit browsers.

The solution is not to use the body for display:table but use a page wrapper (as before) and sidestep the bug.


body{display:block}
#wrap{display:table;width:100%;height:100%}

#wrap should contain all the html inside the body element (apart from the scripts).

17

Now everything works fine. Thanks again Paul