CSS 底部无法正常工作

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 中的“一些东西”是 float 元素，导致#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>