Question

这是使用的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>

Answer 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/

修复div的位置

1 个答案: