列表容器有三个部分，要中间扩展到填充高度

我有一个容器由页眉，页脚和页脚组成。标题需要能够移动一点（这似乎通过设置最大高度工作正常），身体相当多一点，我的页脚是一个固定的高度。整体mapsidebar容器不能增长到400px以上，当发生这种情况时，我希望页眉和页脚始终可见，并且主体有一个滚动条出现。列表容器有三个部分，要中间扩展到填充高度

我遇到了问题，主体扩展为填充容器的高度。任何帮助将不胜感激。我对SA有点新，所以我一直希望我提供了足够的信息。

的行为的说明，listofplaces得到由用户填充生成的内容，因此它可以是一个列表项或20

这里是我的HTML：

<div id="mapsidebar"> 
      <div id="listheader"> 
       <div id="mapTitleLbl" tabindex="2">Untitled Map</div> 
       <input id="mapTitleInput" type="text" maxlength="45" tabindex="-1"/> 
       <div id="mapDescriptionLbl" tabindex="3">Map Description</div> 
       <textarea id="mapDescriptionInput"rows="4" cols="4" maxlength="130" tabindex="-1"> </textarea> 
      </div>    
      <div id="listbody"> 
       <div class="places"><ol id="listofplaces"></ol> 
       </div> 
      </div> 
      <div id="listfooter"> 
       <div id="count"><font id="countView" weight="bold">0</font> views 
       </div> 
       <div id="share"> 
        <div id="zerocopydiv" title="Copy map link to your clipboard"></div> 
        <a id="facebookpopup" title="Share to facebook" href=""></a> 
        <a id="twitterpopup" title="Share to twitter" href=""></a> 
        <div id="sharetext">Share this map</div> 
       </div> 
       <div id="lockPanel"> 
        <div id="unlockable">This map is editable by everyone.</div> 
        <div id ="unlock"><a id="lockcheck" href="" title="Lock/Unlock this map" onclick="javascript:onUnlockClick();return false;"></a> 
        </div> 
       </div> 
      </div> 
     </div>

这里是CSS：

#mapsidebar { 
position: absolute; 
top: 215px; 
right: 0px; 
background-color: #fff; 
color: #41414C; 
font-size: 13px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-moz-box-shadow: 0 0 1px #bab9b9; 
-webkit-box-shadow: 0 0 1px #bab9b9; 
box-shadow: 0 0 1px #bab9b9; 
overflow: auto; 
padding: 0; 
opacity: 0.95; 
width: 200px; 
border: 3px solid #E6E6E6;} 

#listheader{ 
max-height: 168px; 
width: 100%; 
font-size: 12px; 
text-align: left; 
border-bottom: 1px dashed #e6e6e6; 
overflow-y: scroll;} 

#listbody{ 
min-height:150px; 
height: auto; 
overflow: auto;} 

.places{ 
overflow-y: scroll;} 

#listofplaces, 
#listofplaces li{ 
padding: 0px 0px 5px; 
margin: 0 0 0 14px;} 

#listfooter { 
position: absolute; 
bottom: 0; 
width: 100%; 
height: 90px;}

来源

2012-09-22 ficho

看这个http://jsfiddle.net/afshinprofe/G4uEj/ – Afshin

阿夫欣你好，感谢你的回答。我澄清了我的问题，我需要mapsidebar的高度达到400px的最大值，当发生这种情况时，listbody会成长，显示一个边栏以适应这一点。它可行吗？谢谢！ – ficho

ficho，看看这个jsfiddle。我对CSS所做的更改将使主体无限增长，同时仍将页脚保留在底部。

http://jsfiddle.net/GC3yn/

我删除从#listbody的最小高度，因为它没有任何意义有不必要的空格，如果列表中没有的项目。

我也删除从页脚绝对定位和高度，因为它应该在#mapsidebar的底部总是出现由于HTML元素的页面流。

希望这会有所帮助。

来源

2012-09-22 23:00:04

嗨马特，非常感谢您的帮助。其实我需要包含地图边栏的最大高度为400px，当我这样做时，越来越多的列表人员推倒列表主题。你知道我该怎么做吗？我正在编辑这个问题来澄清 – ficho

好吧，这应该做你想要的。 http://jsfiddle.net/GC3yn/2/ –

#mapsidebar应该只有400px高，#listbody应该滚动，但只有当它的内容使高度大于200px。 –

列表容器有三个部分，要中间扩展到填充高度

回答

相关问题