1

I have a sidebar below a topbar but when I try to make the sidebar's height 100% it disappears but when i put a px value to the height, it appears. I tried to do calc(100%-180px), 180px is the height of my topbar, but that also dosen't work.

HTML

<div id="topbar">
<div id="totheright">
<h1>suggestions</h1>
<div id="topbardesc">a little description</div>
<div id="links">
  <a href="/">home</a>
  <a href="/ask">ask</a>
  <a href="/submit">submit</a>
</div>
</div>
</div>

<div id="sidebar">
</div>

CSS

#topbar {
background-color:white;
border-bottom:solid 1px black;
position:relative;
height:180px;
width:100%;
}

#sidebar{
background-color:gray;
width:300px;
height:100%;
}

codepen

Krishna Patel
  • 23
  • 2

1 Answers1

0

You need to set the height of your body and html to 100%

body, html {
  width: 100%;
}

Updated codepen here : https://codepen.io/anon/pen/qKzZQw?editors=1100

Jismon Thomas
  • 783
  • 1
  • 6
  • 22