0

次の階層にdivを作成しています

<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>
<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>
<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>

メインボックス「ボックス」はスクロール可能です。フッター「フッター」を親コンテナー、つまり「ボックス」の下部のままにしたい。私は3日間グーグルしています。どれも機能しませんでした。とても不安です。助けてください

4

1 に答える 1

1

上でSarfrazが言ったように、絶対位置とボトム0を使用する必要があります。

サンプルコードは次のとおりです。

<html> 
<head> 
<style>
body { width:100%;}
.box { float: left; height: 200px; margin-right: 5%; position: relative; width: 20%;}
.footer {bottom: 0px; position: absolute; width: 100%; text-align: center;}
.box_content{ height: 180px; overflow-y: scroll;}
.clear { clear:both;}
</style> 
</head> 
<body> 
<div class="box">
    <div class="box_content">
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
    </div>
    <div class="footer">Footer</div>
</div>
<div class="box">
    <div class="box_content">
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
    </div>
    <div class="footer">Footer</div>
</div>
<div class="box">
    <div class="box_content">
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
        Content goes here <br />
    </div>
    <div class="footer">Footer</div>
</div>  
<div class="clear"> </div> 
</body> 
</html>
于 2012-04-29T12:14:41.773 に答える