1

高さが100％で、中にフッターが入った中央のページコンテナを作成しました。私の問題は、高すぎる要素や長すぎるテキストを入力すると、それらが「#page」コンテナからフッターの上に流れてしまうことです。オーバーフローの使用-y：auto; 「#page」コンテナは見栄えがよくありません。「#page」コンテナは、より長い要素やテキストに対応するために引き伸ばされますが、「＃page」コンテナの高さはブラウザウィンドウの高さと同じになります。審美的に満足のいく解決策をいただければ幸いです。

更新：ここにjsfiddleリンクがありますhttp://jsfiddle.net/ueP9q/

4

1 に答える 1

1

HTML

<div id="page">
    <div id="content">
            <div id="header1" class="header"></div>
            <div id="divider" class="header"></div>
            <div id="header2" class="header"></div>
     <p>asdasdadsads</p>
        <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>

    </div>

    <div id="footer">
        </div>
</div>

CSS

*{margin:0px;padding:0px;}
body,html{height:100%;}
body{
text-align: center;  
padding:0px;
margin:0px;
}
#page{
margin: 0 auto;
background:rgba(255,255,255,0.79);
width:950px;
-webkit-box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
}
#footer{
border-top:1px solid white;
border-bottom:1px solid white;
width:950px;
height:50px;
overflow:hidden;
background-color:blue;
webkit-box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
}

//content
.push{height:4em;}
#content{
border:0px solid black;
width:950px;
height: auto;
}
.header{
margin-top:10px;
border:0px solid black;
height:70px;
float:right;
}
#divider{
border-left:1px solid white;
border-right:1px solid #D4D4D4;
}
#header1{width:470px;
}
#header2{width:470px;
}

これを参照してください - http://jsfiddle.net/aniketpant/U5CSv/

置いた2つのマージンを削除しました。

于 2011-09-07T06:30:12.210 に答える