0
私はthis codeで、ブラウザのウィンドウの高さが変更された場合でも、親の範囲内で子DIVをスクロールさせることに取り組んでいます。子のDIVをスクロール可能にする
I'm trying to get rid of this.
私だけ#FilterBox DIVなくTITLEをスクロールしたいです。 親の高さはheight: calc(91% - 80px);
どのようにすればいいですか？
コードスニペットのCSS部分をご覧ください。 親DIVは#ParentDivで、子DIVは#FilterBoxです。
function initMap() { \t \t //http://devfestmtm.appspot.com/#1
\t \t var mapProp = {
\t \t \t zoom: 4,
\t \t \t center: {lat: 0 , lng: 0},
\t \t \t
\t \t \t mapTypeControl: true,
\t \t \t mapTypeControlOptions:
\t \t \t {
\t \t \t \t style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
\t \t \t \t position: google.maps.ControlPosition.LEFT_TOP,
\t \t \t \t mapTypeIds:
\t \t \t \t [
\t \t \t \t google.maps.MapTypeId.TERRAIN,
\t \t \t \t google.maps.MapTypeId.SATELLITE,
\t \t \t \t google.maps.MapTypeId.HYBRID,
\t \t \t \t google.maps.MapTypeId.ROADMAP,
\t \t \t \t ]
\t \t \t },
\t \t \t mapTypeId: google.maps.MapTypeId.TERRAIN,
\t \t \t
\t \t \t
\t \t \t zoomControl: true, \t \t //http://stackoverflow.com/questions/2437683/google-maps-api-v3-can-i-setzoom-after-fitbounds
\t \t \t zoomControlOptions:
\t \t \t {
\t \t \t \t style: 'LARGE',
\t \t \t \t position: 'RIGHT_CENTER',
\t \t \t },
\t \t \t
\t \t \t scaleControl: true,
\t \t \t draggable: true,
\t \t \t
\t \t \t rotateControl: true,
\t \t \t overviewMapControl: true,
\t \t \t
\t \t \t fullscreenControl: false,
\t \t \t streetViewControl: false,
\t \t \t scrollwheel: true,
\t \t };
\t \t map = new google.maps.Map(document.getElementById('map'), mapProp);
\t }html,body {
\t height: 100%;
\t margin: 0px;
\t padding: 0px
\t }
\t #map{
\t \t height: 100%;
\t }
\t #ParentDiv{
\t \t background-color: rgba(255,255,255,0.9);
\t \t border: 2px solid #fff;
\t \t border-radius : 3px;
\t \t box-shadow: 0 2px 6px rgba(0,0,0,.3);
\t \t border-style: solid;
\t \t border-width: 1px;
\t \t border-color: rgba(132,132,132,0.7);
\t \t padding:0 5px 5px 5px;
\t \t font-family: arial, sans-serif;
\t \t position:fixed;
\t \t min-width: 150px;
\t \t top: 40px;
\t \t left: 4px;
\t \t text-align: left;
\t \t margin-top: 7px;
\t \t margin-left: 7px;
\t \t z-index: 5;
\t \t font-size: 11px;
\t \t vertical-align:top;
\t \t display: block;
\t \t /* Firefox */
\t \t height: -moz-calc(91% - 80px);
\t \t /* WebKit */
\t \t height: -webkit-calc(91% - 80px);
\t \t /* Opera */
\t \t height: -o-calc(91% - 80px);
\t \t /* Standard */
\t \t height: calc(91% - 80px);
\t }
\t #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;
\t }<div id="map"></div>
\t
\t <!--- Change ParentDiv style to none and psqGeral unchecked --->
\t <div id="ParentDiv" style="display:block;">
\t <h1 class="DivTitle" style="background-color:gold; text-align:center;">TITLE<br></h1>
\t <div id="FilterBox">
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome1' value='ValueA' > SomeText - Some Text1
\t \t </label>
\t \t
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_1'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_1'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value1' > SomeText - Some Text1SomeText - Some Text1SomeText - Some Text1<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value2' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome2' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_2'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_2'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome3' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_3'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_3'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome4' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_4'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_4'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome5' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_5'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_5'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome6' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_6'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_6'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t <br>
\t \t <label class="checkbox-inline">
\t \t \t <input type='checkbox' class='psqGeral' name='psqNome7' value='ValueB' > SomeText - Some Text2
\t \t </label>
\t \t <font style='font-size: 13px'>[<a style='text-decoration: none; cursor:pointer;' ><span id='span_classe_especifica_7'>+</span></a>]</font>
\t \t <div style='display:display' class='classeEspecifica' id='div_classe_especifica_7'>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
\t \t \t </label>
\t \t \t <label class="checkbox-inline">
\t \t \t \t <input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
\t \t \t </label>
\t \t </div>
\t \t
\t \t <br>
\t </div>
\t </div>
リンク/変更を迷子にすることができますし、それが起こるとき、それはのために役に立たない、この質問をします問題を再現する最小限の作業コードスニペットを投稿してください。 – LGSon
@LGSon ok、すぐにやるよ！ – GeoMaps