GeoMaps GeoMaps - 5 months ago 8
CSS Question

Make child DIV scrollable

I'm working in the this code to have a child DIV to scroll within the parent's bounds, even when the browser's windows height is changed.

I'm trying to get rid of this.

I only want to scroll the

#FilterBox
DIV and not the TITLE.
For the parent height it must be
height: calc(91% - 80px);


How can I achieve this?

Take a look in the CSS part of the code snippet:
The parent DIV is the
#ParentDiv
and the child DIV is the
#FilterBox
.



function initMap() { //http://devfestmtm.appspot.com/#1
var mapProp = {
zoom: 4,
center: {lat: 0 , lng: 0},

mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_TOP,
mapTypeIds:
[
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.ROADMAP,
]
},

mapTypeId: google.maps.MapTypeId.TERRAIN,


zoomControl: true, //http://stackoverflow.com/questions/2437683/google-maps-api-v3-can-i-setzoom-after-fitbounds
zoomControlOptions:
{
style: 'LARGE',
position: 'RIGHT_CENTER',
},

scaleControl: true,
draggable: true,

rotateControl: true,
overviewMapControl: true,

fullscreenControl: false,
streetViewControl: false,
scrollwheel: true,
};
map = new google.maps.Map(document.getElementById('map'), mapProp);
}

html,body {
height: 100%;
margin: 0px;
padding: 0px
}
#map{
height: 100%;
}
#ParentDiv{
background-color: rgba(255,255,255,0.9);
border: 2px solid #fff;
border-radius : 3px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
border-style: solid;
border-width: 1px;
border-color: rgba(132,132,132,0.7);
padding:0 5px 5px 5px;
font-family: arial, sans-serif;
position:fixed;
min-width: 150px;
top: 40px;
left: 4px;
text-align: left;
margin-top: 7px;
margin-left: 7px;
z-index: 5;
font-size: 11px;
vertical-align:top;
display: block;

/* Firefox */
height: -moz-calc(91% - 80px);
/* WebKit */
height: -webkit-calc(91% - 80px);
/* Opera */
height: -o-calc(91% - 80px);
/* Standard */
height: calc(91% - 80px);
}

#FilterBox{
font-family: arial, sans-serif;
text-align: left;
margin-top: 7px;
padding-right: 20px;
display:block;
font-size: 11px;
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
}

<div id="map"></div>

<!--- Change ParentDiv style to none and psqGeral unchecked --->
<div id="ParentDiv" style="display:block;">
<h1 class="DivTitle" style="background-color:gold; text-align:center;">TITLE<br></h1>

<div id="FilterBox">

<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome1' value='ValueA' > SomeText - Some Text1
</label>

<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_1'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_1'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value1' > SomeText - Some Text1SomeText - Some Text1SomeText - Some Text1<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value2' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome2' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_2'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_2'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome3' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_3'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_3'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome4' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_4'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_4'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome5' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_5'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_5'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome6' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_6'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_6'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
<label class="checkbox-inline">
<input type='checkbox' class='psqGeral' name='psqNome7' value='ValueB' > SomeText - Some Text2
</label>
<font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_7'>+</span></a>]</font>
<div style='display:display' class='classeEspecifica' id='div_classe_especifica_7'>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
</label>
</div>

<br>
</div>
</div>




Answer

You should use calc(100% - 80px) on the #Filterbox, not the #ParentDiv

function initMap() { //http://devfestmtm.appspot.com/#1
  var mapProp = {
    zoom: 4,
    center: {
      lat: 0,
      lng: 0
    },

    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.LEFT_TOP,
      mapTypeIds: [
        google.maps.MapTypeId.TERRAIN,
        google.maps.MapTypeId.SATELLITE,
        google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.ROADMAP,
      ]
    },

    mapTypeId: google.maps.MapTypeId.TERRAIN,


    zoomControl: true, //http://stackoverflow.com/questions/2437683/google-maps-api-v3-can-i-setzoom-after-fitbounds
    zoomControlOptions: {
      style: 'LARGE',
      position: 'RIGHT_CENTER',
    },

    scaleControl: true,
    draggable: true,

    rotateControl: true,
    overviewMapControl: true,

    fullscreenControl: false,
    streetViewControl: false,
    scrollwheel: true,
  };
  map = new google.maps.Map(document.getElementById('map'), mapProp);
}
html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  height: 100%;
}
#ParentDiv {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(132, 132, 132, 0.7);
  padding: 0 5px 5px 5px;
  font-family: arial, sans-serif;
  position: fixed;
  min-width: 150px;
  top: 40px;
  left: 4px;
  text-align: left;
  margin-top: 7px;
  margin-left: 7px;
  z-index: 5;
  font-size: 11px;
  vertical-align: top;
  display: block;
  height: calc(91% - 80px);
}
#FilterBox {
  font-family: arial, sans-serif;
  text-align: left;
  margin-top: 7px;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  float: left;
  width: 1000px;
  overflow-y: auto;
  height: calc(100% - 80px);
}
<div id="map"></div>

<!---  Change ParentDiv style to none and psqGeral unchecked --->
<div id="ParentDiv" style="display:block;">
  <h1 class="DivTitle" style="background-color:gold; text-align:center;">TITLE<br></h1>

  <div id="FilterBox">

    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome1' value='ValueA'>SomeText - Some Text1
    </label>

    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_1'>+</span></a>]</font> 
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_1'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value1'>SomeText - Some Text1SomeText - Some Text1SomeText - Some Text1
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value2'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome2' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_2'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_2'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome3' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_3'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_3'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome4' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_4'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_4'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome5' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_5'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_5'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome6' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_6'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_6'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>
    <br>
    <label class="checkbox-inline">
      <input type='checkbox' class='psqGeral' name='psqNome7' value='ValueB'>SomeText - Some Text2
    </label>
    <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;'    ><span id='span_classe_especifica_7'>+</span></a>]</font>
    <div style='display:display' class='classeEspecifica' id='div_classe_especifica_7'>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3'>SomeText - Some Text
        <br>
      </label>
      <label class="checkbox-inline">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4'>SomeText - Some Text
        <br>
      </label>
    </div>

    <br>
  </div>
</div>

Comments