make make - 3 months ago 8
CSS Question

HTML 100% height bigger than window

I'm working on a layout with a vertical header at the top with a width of 100% of the browser window and below two columns. A sidebar on the left and a main column and both should cover the rest of the window.

Here is the Problem:
If the header got a height of 45px and the sidebar got a height of 100% the height together will be (100% + 45px) which means the whole side is bigger than the browser window. How can I solve this problem?

At the end I want to be able tenter code hereo separately scroll in the main and the sight bar and the header should be fixed at the top.

Here is a little example: Plunkr



* {
margin: 0;
padding: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
}

html, body, #wrapper, #main {
width: 100%;
height: 100%;
}

header, #main {
width: 100%;
}


/* Header */
header {
height: 45px;
background-color: green;
}

header div {
float: left;
}

header #right {
float: right;
}


/* Main */
#main section {
float: left;
}

#main #sidebar {
background-color: red;
width: 190px;
height: 100%;
}

#main #content {
background-color: yellow;
height: 100%;
}

<html>
<head>
</head>

<body>
<div id="wrapper">
<header>
Header
</header>
<div id="main">
<section id="sidebar">
Sidebar
</section> <!-- #sidebar -->
<section id="content">
Content
</section> <!-- #content -->
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>





I hope you can help me

Answer

Keeping your header fixed will solve this. Add position: fixed to the header and that will do.

Let me know your thoughts on this. Thanks!

EDIT:

Added this to the sidebar and content:

  height: calc(100% - 45px);
  padding-top: 45px;

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 13px;
}

html, body, #wrapper, #main {
  width: 100%;
  height: 100%;
}

header, #main {
  width: 100%;
}


/* Header */
header {
  height: 45px;
  background-color: green;
  position: fixed;
}

header div {
  float: left;
}

header #right {
  float: right;
}


/* Main */
#main section {
  float: left;
}

#main #sidebar {
  background-color: red;
  width: 190px;
  height: calc(100% - 45px);
  padding-top: 45px;
}

#main #content {
  background-color: yellow;
  height: calc(100% - 45px);
  padding-top: 45px;
}
<html>
<head>
</head>

 <body>
   <div id="wrapper">
	  <header>
      Header
	  </header>
  	<div id="main">
	  	<section id="sidebar">
	  		Sidebar
  		</section> <!-- #sidebar -->
  		<section id="content">
	  		Content
  		</section> <!-- #content -->
  	</div><!-- #main -->
  </div><!-- #wrapper -->
</body>
</html>

Comments