0

我有一个由页眉、正文和页脚组成的容器。页眉需要能够移动一点（通过设置最大高度似乎可以正常工作），身体要多一点，我的页脚是固定高度。整个 mapsidebar 容器不能增长到超过 400 像素，当发生这种情况时，我希望页眉和页脚始终可见，并且出现滚动条的主体。

我在让身体膨胀以填充容器的高度时遇到问题。任何帮助将不胜感激。我对 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;}
4

1 回答 1

0

ficho，看看这个 jsfiddle。我对您的 CSS 所做的更改将允许正文无限增长，同时仍将页脚保持在底部。

http://jsfiddle.net/GC3yn/

我从#listbody 中删除了最小高度，因为如果列表没有项目，则使用不必要的空格是没有意义的。

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

希望这可以帮助。

于 2012-09-22T23:00:04.830 回答