Question

我有这个侧边栏，我正试图移动到移动视图设备的底部。但是，这不能正常工作，而是将侧边栏放在页面顶部。有人可以帮忙吗？

<div id="checkoutForm">

*some stuff*

<div id="rightMenu">
<div id="checkoutCart" class="rightMenu__box"> 
*some more stuff*
</div>
</div>

</div>


#rightMenu {
    @media#{$medium-up} {
        float: right;
        width: auto;
        height: 0px;    
    }

    @media#{$small-only} {
        width: auto;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

#checkoutForm {
    position: relative;
    height: auto;

    *some stuff*
}

Answer 1

我的猜测是#checkoutForm中的“某些东西”是浮动元素，导致#checkoutForm不强制大小，随后高度为0px，看起来就像渲染你的绝对定位元素一样。

确保不是这种情况，解决该问题的经过验证的技术将是使用clearfix。

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}


<div id="checkoutForm" class="clearfix">

*some stuff*

<div id="rightMenu">
<div id="checkoutCart" class="rightMenu__box"> 
*some more stuff*
</div>
</div>

</div>

CSS Bottom无法正常工作

1 个答案: