6

ページの中央に小さなdivを作成しています。フッターは固定されていますが、divはスクロール可能です。
私によると、それを行うには2つの方法があります。

  1. 使用position:fixed：固定位置は実際にはブラウザウィンドウに対して相対的な位置で機能しますが、小さなdivに対して相対的な位置が必要です
  2. 使用position:absolute：使用bottom:0;私は最初に問題を解決しましたが、フッターはdivテキストでスクロールします。

HTML：

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text 
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

CSS： 

#wrapper{
    width:600px;
    height:500px;    
    border:thin solid #c00;
}
#box {
    width:400px;
    height:300px;
    margin:100px auto;            
    border:medium dashed #c00;
    position:relative;    
    overflow:auto;
}
#content {
    background-color:rgba(0,0,208,0.1);   
}
#footer {
    position:absolute;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}​

見るために：JSfiddle

このdivのフッターを修正するにはどうすればよいですか？

4

3 に答える 3

9

解決策：アウターの内側#wrapperに、別のラッパーを作成します-http://jsfiddle.net/thebabydino/6W5uq/30/#boxを参照してください

ボックスラッパーのスタイルを設定します。

.box-wrap {
    width:400px;
    height:300px;
    margin:100px auto;  
    position:relative;
}

width... 、、、marginおよびposition:relativeを取り出します#box：

#box {
    height:300px;
    margin:0;
    border:medium dashed #c00;    
    overflow:auto;
}

...そしてあなたは.を配置するときにbordersを考慮に入れます。#box#footer

もう1つposition: fixed、親ではなくブラウザウィンドウに関連しているため、この場合は適切ではありません。

于 2012-05-26T16:56:52.650 に答える
1 
<div id="wrapper">
    <div id='outer_box'>
        <div id="box">
            <div id="header">
                <h1>Heading</h1>
            </div>
            <div id="content">
               {text}
            </div>
        </div>
        <div id="footer">
            <p>Fooooooooooooooooooooooooooter</p>            
        </div>
    </div>
</div>​

次に、ここに記載されているように、要素にいくつかのスタイルを追加します：http: //jsfiddle.net/6W5uq/29/

基本的に、フッターをouter_boxの下部に揃えます。コンテンツに余白を追加したので、下にスクロールしてもすべてを表示でき、フッターに余白を追加して、スクロールバーを完全に使用できるようにしました。

于 2012-05-26T16:57:55.177 に答える
1

#footerを使用する代わりに、特定の修正を行う必要があります。次のことを試してください。

#footerにmargin-top：10pxを追加します。位置の代わりに：絶対; 下：0px;

このマージントップを、フッターを「一部のテキスト」divの下に配置する高さに定義します。これは、フッターがdivの下部に設定されているために発生していますが、今後さらに多くのテキストが表示され、オーバーフローがオンになると、コンテンツの下部ではなく、divの高さの下部に固定されます。

于 2012-05-26T17:01:25.223 に答える