内容不会在包装器 div 周围移动
[英]Content not moving around wrapper div
问题描述
I'm trying to structure a page such that there's a horizontal navigation bar at the top that all the other content on the page starts under (the navigation bar is fixed at the top, but the content isn't necessarily), and a side bar that all content should start to the right of (which is fixed at the left).
我正在尝试构建一个页面，使其顶部有一个水平导航栏，页面上的所有其他内容都在其下方（导航栏固定在顶部，但内容不一定），还有一个侧面所有内容都应从右侧开始的栏（固定在左侧）。
Here's a link to the jsfiddle, showing what I've tried: https://jsfiddle.net/o5p8yuvx/5/ .这是 jsfiddle 的链接，显示了我尝试过的内容： https ://jsfiddle.net/o5p8yuvx/5/。
This doesn't work as intended however.然而，这并不像预期的那样工作。 The content starts under topbar but not to the right of sidebar (I've commented out sidebar to show that it sits under topbar ; taking it out of the comment block will illustrate that it does not sit to the right of sidebar ).内容从topbar下开始，但不在sidebar右侧（我已经注释掉sidebar以表明它位于topbar下方；将其从注释块中取出将说明它不在sidebar右侧）。 I want arbitrary text outside both wrappers to sit in the empty part of the page that is not occupied by either bar (the big white space under topbar and to the right of sidebar ), but currently it just sits underneath topbar .我希望两个包装器外的arbitrary text都位于页面的空白部分，该部分未被任何一个栏占据（ topbar下方和sidebar右侧的大空白区域），但目前它仅位于topbar下方。 Since they're both wrappers, why is it only sitting under topbar , not sitting under topbar and sitting right of sidebar ?既然它们都是包装器，为什么它只坐在topbar sidebar下方，而不是坐在topbar sidebar下方并坐在sidebar右侧？
This is just an example however;然而，这只是一个例子； other divs with content in them cause the same issue.其他包含内容的 div 会导致同样的问题。 How do I make all further content sit outside the bars, just like sidebar sits under topbar ?如何让所有进一步的内容位于栏外，就像sidebar位于topbar sidebar下方一样？
2 个解决方案
解决方案1
0 2020-02-25 18:02:01
Since you are using 2 fixed properties, you will need to declare how far from the top to set the sidebar.由于您使用的是 2 个固定属性，因此您需要声明距离顶部多远才能设置侧边栏。 You can fix this with 1 line in your css to say how far from the top of the parent container you want your div to be:您可以使用 css 中的 1 行来解决此问题，以说明您希望 div 离父容器顶部多远：
.sidebar {
...
top: 60px;
}
I used 60px because that is the size of your topbar.我使用了60px因为这是您的60px的大小。 If the top bar changes, you can adjust the sidebar location accordingly.如果顶部栏发生变化，您可以相应地调整侧栏位置。 Here's an updated fiddle这是一个更新的小提琴
The browser defaults to top: auto so that the browser dictates where these items should be, even if it they are wrapped like you have it.浏览器默认为top: auto以便浏览器决定这些项目应该在哪里，即使它们像你拥有的那样被包装。
If position: absolute;
Because of this, the css starts looking above to the next "positioned ancestor" and uses this as a reference of where the top should be正因为如此，css 开始向上看下一个“定位祖先”，并使用它作为顶部应该在哪里的参考
解决方案2
0 已采纳 2020-02-25 18:14:38
It would be best to create a new <div> specifically for the content:最好为内容创建一个新的<div> ：
<div class="content">
arbitrary text
</div>
Then, you can position the <div> , so that it fills the remaining space:然后，您可以定位<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>
I have also provided a jsfiddle .我还提供了一个jsfiddle 。
If you want your code to be semantically correct, you can use <main> instead of <div class="content"> , then change your css to...如果您希望您的代码在语义上是正确的，您可以使用<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.