html - 调整屏幕大小时 Div 移动

Question

我试图将 div header 放在我网站的顶部。我需要它占页面的 100% 宽度。

问题是，当我调整浏览器窗口大小时，div 也会调整大小...

我试过这个:

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
    width: 100%;
}

还有这个:

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
}

两种方式都不行。

#head   {
        height: 120px;
        background: url('../images/head.jpg') repeat;
        margin: 0px auto;
        width: 1100px;
}

这成功了。但我需要宽度为页面的 100%，所以它对我没有帮助。

我该如何解决？谢谢!

Answer 1

当您使用 width: 100%; 时，第一个 block 显然会调整大小；如果您使用的是 block 级元素，比如 div，则不需要定义 100% 因为它默认占据整个水平空间。

现在在第二个 block 中，它不起作用，因为您试图使用 margin: auto; 但没有定义任何 width 来使 block 级元素居中。

第三个可行，因为您定义了一个固定的 width 以及 margin: auto;。

---

那么现在怎么解决呢？

在子元素上使用 margin: auto; 将固定的 width 元素嵌套在 100% width 元素中，您的问题将得到解决。

---

Demo

HTML

<div class="full_width">
    <div class="center_me"></div>
</div>

CSS

.full_width {
    background: #aaa;
    min-height: 100px;
}

.center_me {
    background: blue;
    min-height: 100px;
    margin: auto;
    width: 300px;
}