Laice Laice - 3 months ago 17
CSS Question

Height for Sidebars in a CSS container

I have a very basic template I've been working with to develop a rudimentary site, with a header, footer, and a right hand bar.

I'm struggling to set the right hand bar to 100% of the page, after ensuring every parent and the right bar div itself are set to 100%:

enter image description here

Could anyone advise where I'm going wrong?



* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
height: 100%;
}
.wrapper {
width: 100%;
min-height: 100%;
}

/* Header */
.header {
height: 50px;
background: #FFE680;
}

/* Middle */
.middle {
width: 100%;
padding: 0 0 50px;
position: relative;
height: 100%;
}
.middle:after {
display: table;
clear: both;
}
.container {
width: 100%;
float: left;
overflow: hidden;
height: 100%;
}
.content {
height: 100%;
}

/* Right Sidebar */
.right-sidebar {
float: right;
width: 250px;
margin-left: -250px;
position: relative;
background: #FFACAA;
height: 100%;
}

/* Footer */
.footer {
margin: -50px auto 0;
height: 50px;
background: #BFF08E;
position: relative;
}

<div class="wrapper">
<header class="header">
<strong>Header:</strong>Header
</header>
<div class="middle">
<div class="container">
<main class="content">
<strong>Content:</strong>Content
</main>
</div>
<aside class="right-sidebar">
<strong>Right Sidebar:</strong>Right sidebar
</aside>
</div>
</div>
<footer class="footer">
<strong>Footer:</strong>Footer
</footer>




Answer

Because the <div class="middle"> element doesn't expand. You need to set height another way, use viewport units to take the full viewport height then subtract the header and footer.

.middle {
  ...
  height: calc(100vh - 100px);
}

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: 100%;
}

/* Header */
.header {
  height: 50px;
  background: #FFE680;
}

/* Middle */
.middle {
  width: 100%;
  padding: 0 0 50px;
  position: relative;
  height: calc(100vh - 100px);
}
.middle:after {
  display: table;
  clear: both;
}
.container {
  width: 100%;
  float: left;
  overflow: hidden;
  height: 100%;
}
.content {
  height: 100%;
}

/* Right Sidebar */
.right-sidebar {
  float: right;
  width: 250px;
  margin-left: -250px;
  position: relative;
  background: #FFACAA;
  height: 100%;
}

/* Footer */
.footer {
  margin: -50px auto 0;
  height: 50px;
  background: #BFF08E;
  position: relative;
}
<div class="wrapper">
  <header class="header">
    <strong>Header:</strong>Header
  </header>
  <div class="middle">
    <div class="container">
      <main class="content">
        <strong>Content:</strong>Content
      </main>
    </div>
    <aside class="right-sidebar">
      <strong>Right Sidebar:</strong>Right sidebar
    </aside>
  </div>
</div>
<footer class="footer">
  <strong>Footer:</strong>Footer
</footer>