CSS高度问题chrome [关闭]答案

【问题标题】：css height issue chrome [closed]CSS高度问题chrome [关闭]
【发布时间】：2013-06-07 14:26:00
【问题描述】：

Hy 我对 chrome 中的 css 有疑问。我在右栏中有一个迷你推车，当我添加产品时，推车箱变得越来越大，并越过页脚而不是向下推。这个问题我只有在chrome浏览器中才有。

右栏设置为自动高度。如果我设置高度（2000 像素），我会让页脚向下，但我不需要设置高度。

谢谢

  <div ID="right">
<!--cart-bar open-->
  <div id="cart-bar">
  <!-- For Ajax -->
     <div id="ajjax" style="padding:0px; margin:0px;">
                          <div class="cart"><span>`<a href="">Cart (0 products)`</a></span>
        </div>
        <div id="minicart">
              <div  style="cursor:pointer;">


<span class="minicart-total"></span>
    </div>
<div class="clear"></div>
</div>
            </div>
                     <div class="minicart-bottom">
            </div>
            <!--minicart closed-->
            <div class="contact"><img src="" height="74" border="0"/>
            </div><br />
         <a href="#"></a>
         </div>
      <!--right closed-->
      <div class="clear">
      </div>

      </form></div></div>
      <!--column-right closed-->
   </div>
<!--wrapp-content closed-->
<!--footer open-->




    #column-right #right {float:right; height:auto;}
    #minicart{width:240px; background:url(../images/minicart-bg.png) repeat-y; padding:2px; font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#839606;}
    .minicart-bottom{width:244px; height:16px; background:url(../images/minicart-bottom.png) no-repeat;}
    .minicart-product{width:auto; padding-top:4px; padding-bottom:4px; background:#fafafa;  }

我不知道这是否都相关。

【问题讨论】：

为获得最佳效果，请发布HTML和CSS的相关sn-ps，以便我们检查您的代码以帮助发现问题。创建jsFiddle 来演示问题的奖励积分。
我的蜘蛛侠直觉告诉我你应该发布你的相关代码......
加到小提琴先生 1 分
我添加了编码部分

标签： html css google-chrome height

【解决方案1】：

尝试通过将包装器（包含除页脚之外的所有内容）的高度设置为 100% 来向下推页脚，给页脚一个上边距 - 高度，因此如果页脚的高度为 200 像素，则给它一个上边距-200px，在您的容器 div 的底部添加一个高度为 200px 的空 div，这将始终将您的页脚向下推。

另外我认为您的购物车与页脚重叠的原因是由于浮动问题，请尝试添加“clear: both;”到您的页脚元素。

【讨论】：