固定宽度 div答案

【问题标题】：Fixed width div固定宽度 div
【发布时间】：2012-08-02 20:11:50
【问题描述】：

我将我的 div 设置为固定位置，当我将页面滚动到最底部时，或者如果我使用智能手机或平板电脑等较小的屏幕，我的固定 div 会浮在我的页脚上。我该如何解决这个问题？

这是我固定的 div：

.infoItem{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px #e4e4e4 solid;
    width: 227px;
    background:#f8f6f7;
    position: fixed;
}

这是我的包装：

.wrapper { 
  min-width:954px;
}

我还尝试将我的 infoteam div 包装在另一个 div 中并将新 div 设置为 position: absolute 但这也没有用。

固定 div html

<div class="box-collateral box-up-sell">

        <div class="infoItem">
            <p class="heading">Add to your </p>
            <p class="content">

                        <div class='upsellContainer'>

                               <div>

                               </div>
                        </div>

            </p>
        </div>
    </div>

页脚CSS

.footer { background:url(../images/footer-top-border.png) repeat-x;}
/* .footer-container { border-top:15px solid #b6d1e2; }*/

.footer { width:904px; margin:0 auto; padding:30px 10px 50px; }
.footer .store-switcher { display:inline; margin:0 5px 0 0; color:#fff; }
.footer .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer .store-switcher select { padding:0; vertical-align:middle; }
.footer a {text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer .bugs { margin:13px 0 0; }
.footer .bugs a { text-decoration:underline; }
.footer .bugs a:hover { text-decoration:none; }
.footer address { margin:0 0 20px; }
.footer address a {text-decoration:underline; }
.footer address a:hover { text-decoration:none; }
.footer ul { display:inline; }
.footer ul.links { display:block; }
.footer li {  background:url(../images/bkg_pipe2.gif) 100% 60% no-repeat; padding:0 7px 0 4px; }
.footer li.last { background:none !important; padding-right:0 !important; }
.footer-container .bottom-container { margin:0 0 5px; }

【问题讨论】：

我可以看看你的页脚的 CSS 吗？可能还有用于包装器、页眉和页脚的 HTML。
到目前为止你尝试过什么？你的 html 看起来如何？能否提供实际问题的截图？
是否有特定原因修复了包含内容的 div。这将根据内容调整其高度，并自然溢出其下方的任何内容。您可以通过浮动 div 或使用 960.gs 等内联元素来尝试更稳定的布局实践
@Ran 你的编辑很糟糕。请停止粗体随机短语，同时忽略明显的标点符号、拼写和语法错误。你的编辑没有帮助任何人，他们正在为其他编辑工作。您还使用反引号来突出显示单词。不要那样做，反引号用于内联代码。
@meagar：好的！我会纠正我的错误，谢谢！

标签： html position css-position

【解决方案1】：

在 footer div 中使用 clear:both 或在 css 中应用 clear:both 像：

#footer{
  clear: both;
}

【讨论】：

【解决方案2】：

在 div 之后和页脚之前添加另一个 div，如下所示：

<div style="clear:both"></div>

这将强制其下方的任何元素向下。您还需要确保页脚也有 clear:both（页脚应该始终如此）

【讨论】：