css - 学习 CSS div 放置，定位

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; 
}

这是小提琴。

此外，您似乎正在尝试进行响应式设计，但让我告诉您，您正在进行的方式并不适合它。你可以阅读Ethan Marcotte 的响应式设计来学习它。

编辑

进行以下更改：

1. 给height: 400px;或按要求给表div。
2. 使您的页脚div离开表格div。
3. 根据 footer 中的要求删除margin-top或将其更改为 5% 或 10% div。
4. 添加min-height: 100%;到.tabs.

看看小提琴。

Answer 2

尝试硬编码高度值

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

Answer 3

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

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