内容不会在包装器 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