フォームの送信ボタンが常にウィンドウの下部にくるように、ページのスタイルを設定するにはどうすればよいですか？

私はすでに永続的に「ボトム整列」100％の高さと、次のCSSを使用したコンテナを使用してフッターを持っているページがあります。私がやりたい何フォームの送信ボタンが常にウィンドウの下部にくるように、ページのスタイルを設定するにはどうすればよいですか？

#footer { 
position: absolute; 
left: 0px; 
right: 0px; 
bottom: 0px; 
font-size: 12px; 
}

は私のページのフォームのボタンを持っていますフォームの他の内容にかかわらず、常にフッターの直上にある（「html」の下に、クラス「actionButtons」を持つdivによって示されています）。フォームのコンテンツがオーバーフローを起こさないことを保証できます。

<html> 
<body> 
    <div> 
     <div class="wideContent"> 
      <form>   
       <div class="actionButtons" style="text-align:right;"> 
       </div> 
      </form> 
     </div>  
    </div> 

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

私は、高さ/分の高さではうまくいっていませんでした。フッターのすぐ上のウィンドウの下部に常に "actionButtons" divを配置するには、上記のhtmlにどのようなCSSが必要でしょうか？前もって感謝します。

出典

2011-07-07 Will

actionbuttons divも完全に配置し、フッターの上に配置する 'bottom：xxx'を指定しますか？ –

@Marc B私がそれをすると、私のアクションボタンはフォームの一番下に浮かび、重なっています（ページの下部にはありません）。フォームにはPosition：Relativeが設定されています。 – Will

それはdiffを行います。 pos：absはpos：rel（またはtopにヒットする）ノードを見つけて測位計算を行うまで、DOMツリーをバックアップします。 –

<form>にはposition:relativeがあるので、ボタンを強制的に底部に押し込むと思う唯一の方法は、たとえば＆hellip; position:fixedです。

#footer { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    font-size:12px; 
    height:25px; 
} 

.actionButtons { 
    position:fixed; 
    bottom:25px; 
    left:0; 
    right:0; 
    height:10px; 
}

＆hellip; this demoのように。しかし、正確に配置するには、に設定されている高さが.actionButtonsのbottomに一致する必要があります。（デモのために.actionButtonsにheightを入れました）。

出典

2011-07-07 18:13:01 andyb

これはうまくいった。どうもありがとうございました！ – Will

お寄せいただきありがとうございます:-) – andyb

フォームの送信ボタンが常にウィンドウの下部にくるように、ページのスタイルを設定するにはどうすればよいですか？

答えて

関連する問題