0

使用したcssです

<style type="text/css">
#search_results{position:relative;height:369px;overflow:auto}
#floating{background-color:#eee;padding:15px;position:absolute;bottom:0px}
</style>

フローティング div を検索結果 div の下部に固定して配置する必要があります。上記の css をフローティング div に適用すると、div が検索結果の div の下部にスタックし、それが予想されます。ウィンドウをスクロールすると、問題ありません。しかし、search_results div 内をスクロールすると、フローティング div の位置が変更されます。ページがスクロールされているか、検索結果のdivがスクロールされているかに関係なく、検索結果のdivの下部に配置したい.私は以下のスクリプトを試しました. IEを除くすべてのブラウザで正常に動作します。つまり、divは下に配置されていますが、ジャークはほとんどありません..ページがスクロールされたり、検索結果がスクロールされたりしても、常に下に固定する方法

<div style="width:695px;border:1px solid red" id="search_results">
    <div id="floating">test block</div>
       <div style="padding:25px 0;border-bottom:1px solid green">       
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div> 
        <div style="padding:25px 0;border-bottom:1px solid green">      
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div>
         <div style="padding:25px 0;border-bottom:1px solid green">     
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div> 
</div>
4

1 に答える 1

1

フローティング div を検索 div の外に移動できます。

<div style="width:695px;border:1px solid red" id="search_results">

       <div style="padding:25px 0;border-bottom:1px solid green">       
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div> 
        <div style="padding:25px 0;border-bottom:1px solid green">      
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div>
         <div style="padding:25px 0;border-bottom:1px solid green">     
          <div style="float:left">
            <p>test1</p>
            <p class="mrgBtm5px">random no</p>
            <p>
                <span>lorem ipsum</span><br/>
                <span>lorem ipsum expand</span>

            </p>
          </div>         
            <div style="clear:both"></div>  
        </div> 
</div>
<div id="floating">test block</div>

以下のcssを適用します。

#floating {
    background-color: #EEEEEE;
    bottom: 0;
    display: inline-block;
    left: 1px;
    padding: 15px;
    position: relative;
    top: -51px;
}

これをチェックしてくださいhttp://jsfiddle.net/6Qyvy/5/show

上記の変更された html とともにこの css を適用することもできます。

#floating {
    background-color: #EEEEEE;
    display: inline-block;
    margin-left: 1px;
    margin-top: -51px;
    padding: 15px;
    position: absolute;
}

これをチェックしてくださいhttp://jsfiddle.net/6Qyvy/6/show/

于 2013-09-15T06:05:33.467 に答える