0

ヘッダー、ボディ、フッターで構成されたコンテナーがあります。ヘッダーは少し移動できる必要があり（最大の高さを設定するとうまくいくようです）、ボディはかなり多く移動できます。私のフッターは固定の高さです。マップサイドバーコンテナ全体を400px以上に拡大することはできません。その場合、ヘッダーとフッターを常に表示し、本体にスクロールバーを表示したいと思います。

コンテナの高さを満たすためにボディを拡張する際に問題が発生します。どんな助けでも大歓迎です。私はSAに少し慣れていないので、十分な情報を提供したことを常に望んでいます。

動作に関する注意事項として、listofplacesにはユーザー生成コンテンツが入力されるため、1つのリストアイテムまたは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からmin-heightを削除しました。

また、HTML要素のページフローのために常に#mapsidebarの下部に表示されるはずなので、フッターから絶対位置と高さを削除しました。

お役に立てれば。

于 2012-09-22T23:00:04.830 に答える