html - 使嵌套 div 的宽度填充到浏览器

Question

其实这是我在开发blogger的过程中遇到的一个问题。

我想自己写一个导航栏，但是父元素的宽度限制了样式width:100%，即使我将浮动属性设置为它。

请看上图。只有nav的 HTML/JS/CSS 是可配置的。那么如何配置类的 CSS 样式nav来归档这个目标呢？

或者，如果你有开发博客的相关经验，请告诉我。

非常感谢！

Answer 1

要实现这种“分层”，您可能需要使用绝对定位，尤其是在您的选择有限的情况下。这有一个明显的警告，就是将其从页面流程中移除，因此您需要确保您的页面永远不会太短而无法显示。它也不会影响它周围的其他元素。

所以，像：

nav {
    left: 0;
    position: absolute;
    top: 400px;
    width: 100%;
}

希望它的父母中有一个知道在绝对定位时position: relative;将nav其用作原点的位置，否则它将使用浏览器窗格的左上角。

z-index如果您希望您nav出现在内容后面，您可能还需要一个值。

Answer 2

为您的导航使用绝对位置。看看这个 FIDDLE

html：

<div class="first">0</div>
<div>
    1
    <div class="nav">NAV</div>
</div>
<div>2</div>

CSS：

div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }

编辑

您的导航position:relative;很好，您可以使用该 jquery 将您的导航附加到您的身体（这里的 FIDDLE 已更新）：

$(".nav").appendTo("body");

Answer 3

不确定这是否是您要搜索的内容，但您可以尝试提供您的导航position: absolute;和width: 100%;. 这将使导航元素脱离文档流。