ansaurus

Question

Answer 1

A:

This:

height: auto !important; height: 100%; min-height: 100%;

is not really necessary. You probably want height: auto; min-height: 100%;

EDIT: ignore what I wrote before the edit, I just overlooked the div :)

EDIT 2: Opera tells me that height of the div is 551px but height of the wrapper div is just 451px. This is caused by the wrapper div having a 100px bottom padding that increases the height.

dark_charlie 2010-10-10 15:59:04

height: auto !important; should be the fix for IE6, but changing it to yours solution didn`t help :(

Machi 2010-10-10 16:09:34

I edited my answer, does removing the padding work?

dark_charlie 2010-10-10 16:19:29

Answer 2

+1 A:

I think your additional wrappers may be causing you issues.

I'd possibly go back to a basic 100% height layout and then add your content.

This works across all browsers including IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #CCC;
width: 75%;
margin: 0 auto;
}
* html #container {
height: 100%;
}</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
</div>
</body>
</html>

Toggo 2010-10-10 16:07:50

Hi, I thought this too so I tried to add min-height to all the wrappers (since I need at least two wrapper with bottom background to have 100% but nothing happened.

Machi 2010-10-10 16:13:37

ansaurus

tags:

views:

answers:

min-height doesn't work

related questions