使子 DIV 可滚动
Posted
技术标签:
【中文标题】使子 DIV 可滚动【英文标题】：Make child DIV scrollable 【发布时间】：2016-11-05 00:21:31 【问题描述】：我正在this code 工作，以使子 DIV 在父级范围内滚动，即使浏览器的窗口高度发生更改。
I'm trying to get rid of this.
我只想滚动 #FilterBox DIV 而不是 TITLE。
对于父高度，它必须是height: calc(91% - 80px);
我怎样才能做到这一点？
看一下代码sn-p的CSS部分：
父 DIV 是 #ParentDiv，子 DIV 是 #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://***.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">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value1' > SomeText - Some Text1SomeText - Some Text1SomeText - Some Text1<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value2' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3' > SomeText - Some Text<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4' > SomeText - Some Text<br>
</label>
</div>
<br>
</div>
</div>【问题讨论】：
到外部网站的链接可能会丢失/更改，当这种情况发生时，这将使这个问题对未来的用户毫无用处，所以发布一个最小的工作代码 sn-p 来重现这个问题。 @LGSon 好的，我现在就去做！ 【参考方案1】：您应该在#Filterbox 上使用calc(100% - 80px)，而不是#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://***.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">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value1'>SomeText - Some Text1SomeText - Some Text1SomeText - Some Text1
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value2'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome1' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome2' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome3' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome4' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome5' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome6' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<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">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value3'>SomeText - Some Text
<br>
</label>
<label class="checkbox-inline">
<input type='checkbox' class='psqEspecifica' name='psqNome7' value='Value4'>SomeText - Some Text
<br>
</label>
</div>
<br>
</div>
</div>【讨论】：
@GeoMaps 不是在我测试它的时候，而是整个ParentDiv 在调整其高度时移动到视口下方，原因是top: 40px，所以我添加了height: calc(91% - 80px);在ParentDiv 上，或者您需要将top: 40px 更改为百分比【参考方案2】：
试试下面的代码。调整高度和宽度以满足您的需要。
#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 仍然比父高度更远。看看你的代码会发生什么：dl.dropboxusercontent.com/u/39041929/1.PNG以上是关于使子 DIV 可滚动的主要内容，如果未能解决你的问题，请参考以下文章