第一個導航欄總是在那裏。
有時我有第二個導航欄。
內容不會在navbars下
這2個navbars必須位於標題的頂部。
這2個navbars必須是「無限」的頁面底部。
身體沒有固定的寬度。

first layout possible second layout possible

<body> 
    <header></header> 
    <nav id="main-nav">main-nav</nav> 
    <nav id="sub-nav">sub-nav optionnal</nav> 
    <section id="main-section">main section</section> 
</body>

我試圖把2 NAV集團作爲絕對的，但我的內容部分是沒有動態地對他們的離開了。 [fiddle]

header { height: 250px; } 
#main-nav { 
    width:150px; 
    position: absolute; 
    top: 150px; 
    left: 0; 
} 
#main-section { margin-left:150px; }

我試着浮動左，但我的導航不在頭上。

你有什麼想法嗎？我可以使用自舉3，即使設計不響應

來源

2015-04-17 goto

你想NAV去頭頂部？ –

是的，導航應該是有點過頭 – goto

爲什麼你不移動標題之前的導航標籤？ –

這個怎麼樣的解決方案：http://codepen.io/anon/pen/pJzReW

header { 
    height: 250px; 
    background-color: red; 
} 
#main-nav, #sub-nav { 
    width:150px; 
    position: relative; 
    float: left; 
} 
#main-nav { 
    background-color: blue; 
    margin-top: -100px; 
    height: 500px; 
} 
#sub-nav { 
    background-color: yellow; 
    margin-top: -50px; 
    height: 450px; 
} 
#main-section { 
    background-color: green; 
    height: 400px; 
}

隨着position: relative;元素的原始空間保持（在這種情況下，我們用它來保持寬度），但可以移動它們（在這種情況下，使用負邊距頂部）。

編輯

在你想要的資產淨值觸摸頁面底部的情況下，我覺得這個方法可以更好：http://codepen.io/anon/pen/MwgJEQ?editors=110

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
header { 
    height: 250px; 
    background-color: red; 
} 
#main-nav, #sub-nav { 
    width:150px; 
    position: absolute; 
} 
#main-nav { 
    background-color: blue; 
    bottom: 0px; 
    top: 100px; 
} 
#sub-nav { 
    background-color: yellow; 
    left: 150px; 
    top: 150px; 
    bottom: 0px; 
} 
#main-section { 
    background-color: green; 
    height: 400px; 
    padding-left: 300px; 
}

來源

2015-04-17 22:33:54

它看起來不錯，非常感謝！你知道我們怎麼能有兩個導航100％的高度？ – goto

查看我的最後編輯:) –

這是我的第一個方法，但內容被「砍掉」了剩餘空間：當我有ony的第一個nav時，內容不應該有空白。無論如何，謝謝你的幫助 – goto

全球佈局和定位

回答

編輯

全球佈局和定位

回答

編輯

相關問題