CSS - Minimum Height and Content

+1 Stuart Abbott · March 11, 2015
Hi there people. After how helpful you all were recently, I thought I would rack your brains again.

I am trying to make a bare template for a website at the moment with no actual content, as I am merely testing out some ideas. However, I am having a little trouble making it work as I want. I'll try to explain and show the code being used, but if you guys are confused by what I am asking, please just let me know.

Thanks in advance!!

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Test</title>
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="wrapper">
<header id="pageHeader">

</header>
</div>
</body>
</html>
CSS:
* {
  margin: 0;
  padding: 0;
  font-family: Tahoma, Verdana, Vegoe, sans-serif;
}

body, html {
  height: 100%;
}

body {
  background: #1E1E1E;
}

#wrapper {
  background: #3E3E3E;
  min-height: 100%;
  width: 90%;
  margin: auto;
}

#pageHeader {
  background: orange;
  min-height: 15%;
  width: 100%;
}

I am trying to make it so that the page header is always on screen, with a minimum height of 15% of the wrapper div, a width of 100% of the wrapper div, and expanding if the content of the header exceeds the 15% height. I did find that if I set the pageHeader position to be absolute, and drop the width of pageHeader to 90% (the same as the wrapper div), it works. But I was wondering if there was a way to achieve this without position the header with absolute.

Post a Reply

Replies

Oldest  Newest  Rating
0 Stuart Abbott · March 11, 2015
I think that I may have solved my own problem. If somebody could verify, I would be really happy!

I think I needed to define in #wrapper that both height and min-height are 100%. My new CSS looks like this and, at present, seems to be working:

* {
  margin: 0;
  padding: 0;
  font-family: Tahoma, Verdana, Vegoe, sans-serif;
}

body, html {
  height: 100%;
}

body {
  background: #1E1E1E;
}

#wrapper {
  background: #3E3E3E;
  min-height: 100%;
  height: 100%;
  width: 90%;
  margin: auto;
}

#pageHeader {
  background: orange;
  min-height: 10%;
  width: 100%;
}
  • 1

HTML / CSS / Web Design

106,982 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators