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 之外的所有浏览器中都能正常工作。在 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

您还可以将此 css 与上述修改的 html 一起应用，

#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 回答