Question

我正在学习CSS，我正试图在身体正下方放置红色背景的div，我似乎无法使它适合身体，每当我调整宽度时它都不对齐与身体，当我试图将其放置在中心和100％宽度时，它占据页面宽度的100％它不与白色背景区域对齐，每当我做80％时它确实对齐左边并且不对齐白色背景区。请指出正确的方向。我卡住了:(

我到目前为止的代码在这里：http://pastebin.com/VPMgbzQ2

提前致谢。

Answer 1

将页脚div从标签div中移出，不需要position: absolute。进行以下更改：

#footer
{
        margin-top:80%;
        height: 20px;
        width:50%;
        text-align:center;
        background:#C00; 
}

这是fiddle。

此外，您似乎正在尝试制作响应式设计，但让我告诉您，您正在进行的方式并不适合它。您可以阅读Responsive Design By Ethan Marcotte了解它。

修改

进行以下更改：

根据height: 400px;或表div的要求提供div。

将您的页脚div从表margin-top中取出。

根据页脚div的要求移除min-height: 100%;或将其更改为5％或10％。

将.tabs添加到{{1}}。

查看fiddle。

Answer 2

尝试对高度值进行硬编码

#spaceheader {
   width: 100%;
   height: 100px;
   background: #000000;
}

Answer 3

我现在看到你的问题。父元素<div class="tab">是造成问题的原因。如果我是你，我会从选项卡中取出单选按钮，让它没有浮动：留在它上面，这可能会解决问题。然后，您需要删除页脚div上的绝对定位。

此外，看起来您将页脚div放在选项卡内部，实际上它应该位于所有选项卡之外，位于代码下方。

学习CSS div放置，定位

3 个答案: