Minnu P Minnu P - 5 months ago 12
CSS Question

Div scroll in Divs won't scroll

Populating results into div2 but div scroll is not showing as I thought.
Seems like div2 100% is going far bottom of browser but couldn't make it 100% with in given area.
This div is staying on right side.
How can I put my results into div2 with a scroll?

JSfiddle: https://jsfiddle.net/nx02w9h5/1/

html

<div id="sideContainer">
<div id="midContainer">
<div id="menuBox">
<div id="div1">
<ul class="tabs-menu">
<li class="current"><a href="#tab-1">TBD</a></li>
<li><a href="#tab-2">TBD</a></li>
<li><a href="#tab-3">TBD</a></li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<form name="sOptForm" id="sOptForm">
<input type="radio" name="searchOp" class="sOption" value="opt1" checked> opt1
<br>
<input type="radio" name="searchOp" class="sOption" value="opt2"> opt2
<br>
<input type="radio" name="searchOp" class="sOption" value="opt2"> opt3</form>
<br />
<input type="text" id="stateName" value="Dorm">
<input id="execute" type="button" value="Search">

</div>
<div id="div2">
sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>sadfgsadfadsfsad
<br>

</div>

<div id="tab-2" class="tab-content">
<!--contents-->
</div>
<div id="tab-3" class="tab-content">
<!--contents-->
</div>
</div>

</div>
</div>
</div>
</div>


css

html,
body,
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}

#sideContainer {
display: table;
z-index: 888;
position: absolute;
top: 0px;
right: 0px;
width: 300px;
vertical-align: middle;
height: 100%;
}

#midContainer {
display: table-cell;
vertical-align: middle;
bottom: 0px;
height: 100%;
}

#menuBox {
position: relative;
margin-left: auto;
margin-right: auto;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: red;
width: 100%;
height: 100%;
overflow: hidden;
}

#div1,
#div2 {
position: absolute;
}

#div1 {
top: 0px;
right: 0px;
width: 100%;
height: 100%;
}

#div2 {
color: #500000;
top: 160px;
width: 98%;
right: 0px;
overflow: scroll;
}

#search_res {
width: 97%;
}

ul {
list-style-type: none;
padding: 0;
}

.tabs-menu {
height: 20px;
float: left;
clear: both;
}

.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
margin-right: 10px;
background-color: #ccc;
border-top: 1px solid #500000;
border-right: 1px solid #500000;
border-left: 1px solid #500000;
border-radius: 5px 5px 0px 0px;
}

.tabs-menu li.current {
position: relative;
border-bottom: 1px solid #F4AF00;
background-color: #B7A66D;
z-index: 5;
}

.tabs-menu li a {
padding: 10px;
color: #500000;
text-decoration: none;
}

.tabs-menu .current a {
color: #500000;
}

.tab {
float: left;
margin-bottom: 10px;
width: 98%;
height: 100%;
}

.tab-content {
width: 98%;
padding: 0px;
display: none;
}

#tab-1 {
display: block;
}


thanks!

Answer

Add bottom: 0 to your CSS rule

Updated fiddle

#div2 {
  color: #500000;
  top: 160px;
  width: 98%;
  right: 0px;
  bottom: 0;
  overflow: scroll;
}
Comments