1

こんにちは、私はこのようなメインページを持っています。

html ビュー

<html>   

<head>  

</head>  

<body>  

<div class="wrapper">  

<div class="content">  

<ui:include src="/templates/include/header.xhtml"/>  

<div class="left_menu">  

<ui:include src= />  

</div>  

<div class="content_container">  

<ui:insert name="body">Body</ui:insert>  

</div>      

</div>  

<div class="footersathi">  

<ui:insert name="footer">footer</ui:insert>  

</div>  

</div>      

</body>  

</html>

html ビューの終わり

CSS 

.wrapper {  
min-height:100%;
position:relative;
     }

.content {
margin:0;
padding-bottom:20px;
}

.left_menu {
position: absolute;
top: 0px;
left: 0px;
}

.content_container {
position: absolute;
top: 176px;
left: -15px;
}

.footersathi {
width:100%;
height:20px;
position:absolute;
bottom:0;
left:0;
background:blue;
}

CSSの終わり

問題は、iam がui:insert name=bodyタグを使用しているためです。一部のページにはコンテンツが少なく、一部のページにはコンテンツが多く含まれていますが、フッターはそのコンテンツに対して相対的に変化せず、代わりに特定の位置に固定されています。 ui:insert が使用されているときにこの問題を解決する方法を教えてください。

4

2 に答える 2

0

なぜposition: absolute;フッターで使用するのですか? 設定した場合position: static'(指定しない場合のデフォルト)、フッターはドキュメントの最後に自動的に表示されます。

これがあなたの質問に答えない場合は、質問をより明確にしてください:)

必要に応じて、要素を通常の流れから外して配置することを避けることができると思います。CSS を使用してレイアウトを作成する方法の例については、こちらの例を参照してください。

于 2012-05-07T07:30:26.723 に答える
0

フッターの前のラッパー div クラス (提供した css を使用) は、フッターを常にページの下部に配置したい場合に提案される解決策だと思います。

あなたの問題に関しては、floatまたはinline-blockが指定されていない限り、divクラスはデフォルトで互いの上にあります。したがって、削除すると:

position:absolute;
bottom:0;
left:0;

Wesley が説明したように、レイアウトは問題ないはずです。

于 2012-05-07T08:04:34.917 に答える