內容不會在包裝器 div 周圍移動

Question

我正在嘗試構建一個頁面，使其頂部有一個水平導航欄，頁面上的所有其他內容都在其下方（導航欄固定在頂部，但內容不一定），還有一個側面所有內容都應從右側開始的欄（固定在左側）。

這是 jsfiddle 的鏈接，顯示了我嘗試過的內容： https ://jsfiddle.net/o5p8yuvx/5/。

然而，這並不像預期的那樣工作。 內容從topbar下開始，但不在sidebar右側（我已經注釋掉sidebar以表明它位於topbar下方；將其從注釋塊中取出將說明它不在sidebar右側）。 我希望兩個包裝器外的arbitrary text都位於頁面的空白部分，該部分未被任何一個欄占據（ topbar下方和sidebar右側的大空白區域），但目前它僅位於topbar下方。 既然它們都是包裝器，為什么它只坐在topbar sidebar下方，而不是坐在topbar sidebar下方並坐在sidebar右側？

然而，這只是一個例子； 其他包含內容的 div 會導致同樣的問題。 如何讓所有進一步的內容位於欄外，就像sidebar位於topbar sidebar下方一樣？

Answer 1

由於您使用的是 2 個固定屬性，因此您需要聲明距離頂部多遠才能設置側邊欄。 您可以使用 css 中的 1 行來解決此問題，以說明您希望 div 離父容器頂部多遠：

.sidebar {
  ...
  top: 60px;
}

我使用了60px因為這是您的60px的大小。 如果頂部欄發生變化，您可以相應地調整側欄位置。 這是一個更新的小提琴

瀏覽器默認為top: auto以便瀏覽器決定這些項目應該在哪里，即使它們像你擁有的那樣被包裝。

如果位置：絕對； 或位置：固定； - top 屬性將元素的上邊緣設置為其最近定位的祖先的上邊緣上方/下方的單位。

正因為如此，css 開始向上看下一個“定位祖先”，並使用它作為頂部應該在哪里的參考

熱門參考

Answer 2

最好為內容創建一個新的<div> ：

<div class="content">
  arbitrary text
</div>

然后，您可以定位<div> ，以便它填充剩余空間：

.content {
  margin: 0 0 0 300px;
}

 body { margin: 0; } .topwrapper { height: 60px; } .sidewrapper { width: 300px; } .topbar { background-color: grey; position: fixed; width: 100%; height: 60px; margin: 0; } .topbar ul { list-style-type: none; } .topbar li { color: blue; } .topbar a:hover { background-color: black; } .sidebar { background-color: black; position: fixed; width: 300px; height: 100%; margin: 0; } .sidebar ul { list-style-type: none; } .sidebar li { color: blue; } .sidebar a:hover { background-color: white; } .content { margin: 0 0 0 300px; }

 <!DOCTYPE HTML> <html> <head> <title>Webpage</title> </head> <body> <div class="topwrapper"> <div class="topbar"> <ul> <li><a style="float: left">Link 1</a></li> <li><a style="float: left">Link 2</a></li> <li> <p style="float: right">Welcome</p> </li> </ul> </div> </div> <div class="sidewrapper"> <div class="sidebar"> <ul> <li><a>Link 3</a></li> <li><a>Link 4</a></li> <li> <p>Welcome</p> </li> </ul> </div> </div> <div class="content"> arbitrary text </div> </body> </html>

我還提供了一個jsfiddle 。

如果您希望您的代碼在語義上是正確的，您可以使用<main>而不是<div class="content"> ，然后將您的 css 更改為...

main {
  margin: 0 0 0 300px;
}

 body { margin: 0; } .topwrapper { height: 60px; } .sidewrapper { width: 300px; } .topbar { background-color: grey; position: fixed; width: 100%; height: 60px; margin: 0; } .topbar ul { list-style-type: none; } .topbar li { color: blue; } .topbar a:hover { background-color: black; } .sidebar { background-color: black; position: fixed; width: 300px; height: 100%; margin: 0; } .sidebar ul { list-style-type: none; } .sidebar li { color: blue; } .sidebar a:hover { background-color: white; } main { margin: 0 0 0 300px; }

 <!DOCTYPE HTML> <html> <head> <title>Webpage</title> </head> <body> <div class="topwrapper"> <div class="topbar"> <ul> <li><a style="float: left">Link 1</a></li> <li><a style="float: left">Link 2</a></li> <li> <p style="float: right">Welcome</p> </li> </ul> </div> </div> <div class="sidewrapper"> <div class="sidebar"> <ul> <li><a>Link 3</a></li> <li><a>Link 4</a></li> <li> <p>Welcome</p> </li> </ul> </div> </div> <main> arbitrary text </main> </body> </html>

內容不會在包裝器 div 周圍移動

問題描述

2 個解決方案

解決方案1
0 2020-02-25 18:02:01

解決方案2
0 已采納 2020-02-25 18:14:38

內容不會在包裝器 div 周圍移動

問題描述

2 個解決方案

解決方案1 0 2020-02-25 18:02:01

解決方案2 0 已采納 2020-02-25 18:14:38

解決方案1
0 2020-02-25 18:02:01

解決方案2
0 已采納 2020-02-25 18:14:38