製作嵌套divs的寬度填充到瀏覽器

我想自己寫一個導航欄，但是父元素的寬度限制了樣式width:100%，即使我設置了浮動屬性。 enter image description here

請看上面的圖片。只有nav的HTML/JS/CSS是可配置的。那麼如何配置類nav的CSS樣式來歸檔此目標？或者，如果您有開發博主的經驗，請告訴我。

非常感謝！

2013-10-08 Darklizard

使用您的導航的絕對位置。 Look at this 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的（HERE THE FIDDLE UPDATED ）：

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

來源

2013-10-08 09:28:04

謝謝你的演示！。然而，我發現由於一個父元素的'position：relative;'propertise，我的'nav'不能逃避它。我在這裏模擬它在jsfiddle http://jsfiddle.net/helisz/cRgEC/1/ – Darklizard

問題修復，看看編輯:) –

就是這樣！非常感謝！ – Darklizard

不知道這是你正在尋找，但你可以嘗試給你的導航position: absolute;和width: 100%;。這將使導航元素離開文檔的流程。

來源

2013-10-08 09:25:09 SKeurentjes

要實現這種「分層」，您可能需要使用絕對定位，特別是如果您的選項有限。這有一個顯而易見的警告，即將其從頁面流中移出，因此您需要確保頁面永遠不會太短而無法顯示。它不會影響周圍的其他元素。

所以，像這樣：

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

希望其父母之一有position: relative;所以nav知道在哪裏爲原點絕對定位時使用，否則它會使用瀏覽器的左上角窗格。

如果您希望nav出現在內容後面，您可能還需要一個z-index值。

來源

2013-10-08 09:26:14

感謝您的回覆。然而，我發現由於一個父元素的'position：relative;'屬性，我的nav無法逃避它。我在這裏在jsfiddle中模擬它：http：//jsfiddle.net/helisz/cRgEC/1/ – Darklizard

@Darklizard這是一個明確的問題，特別是假設你無法控制父'div'。會使用'width：5000px;'來滿足您的需求嗎？如果JavaScript是一個選項，您也可以使用它來動態設置「nav」的寬度以匹配瀏覽器窗格。一個jQuery解決方案就像'$（window）.resize（function（）{$（'nav'）.width（$（window）.width（））;}）;'。 –

製作嵌套divs的寬度填充到瀏覽器

回答

相關問題