CODEWITHSUNDEEP
htmlcss
Machi
Machi

Reputation: 369

min-height doesn't work

I have a weird problem. I need two backgrounds on the bottom of the website in left and right corner (always stick it to the bottom of the whole browser's window) so I used min-height in CSS, like this:

For body, html - height: 100%;

For inner wrap div - height: auto !important; height: 100%; min-height: 100%;

This should do the whole trick and always display a div with 100% but it doesn't work at all, I'm getting a bit desperate from it.

Here is the demo: http://clients.youweyoucoding.com/jm/peter-bilka/crescita/

Is there something wrong in the code?

Upvotes: 1

Views: 3554

Answers (2)

Karel Petranek
Karel Petranek

Reputation: 15154

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.

Upvotes: 0

TDH
TDH

Reputation: 567

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">
<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>

Upvotes: 1

Related Questions