Adam H Adam H - 3 months ago 6
CSS Question

scrolling div height overflows footer and is hidden

I'm trying to achieve a scroll-able div where its contents does not overflow behind the footer. There is a sidebar which has a search and another hidden div below it that shows filter options for the results displayed underneath. The results need to fill the remaining height available and scroll if there isn't enough space. At the moment it overflows so i can't see the bottom results as they are tucked behind the footer. I'm having a hard time getting the results div to only fill the remaining space.

html:

<div id="header">
header
</div>
<div id="map-wrapper">
<div id="map-sidebar">
<div id="map-search">
<input id="search" type="text" class="form-control" placeholder="Enter location" />
<div id="filters">
<input/>
<input/>
<input/>
</div>
</div>
<div id="map-results">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div id="map"></div>
</div>
<div id="footer">
footer
</div>


css:

div {
border: 1px solid red;
}

#map-wrapper {
position: fixed;
top: 60px;
bottom: 30px;
left: 0;
right: 0;
width: 100%;
}

#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 250px;
background: blue;
}

#map-sidebar {
width: 250px;
height: 100%;
}

#map-search {
margin: 15px;
}

#map-results {
height: 100%;
overflow-y: scroll;
border: 1px solid purple;
}

#header {
height: 60px;
top:0;
left:0;
right:0;
position: fixed;
text-align: center;
}

#filters {
display: none;
}

#footer {
height: 30px;
bottom: 0;
left:0;
right:0;
position: fixed;
text-align: center;
}


JsFiddle:
https://jsfiddle.net/me6nceca/

Thanks for any help

MJH MJH
Answer

Use this instead in the CSS for #map-results:

height: calc(100% - 60px);