我正在尝试使用全高侧边栏创建响应式布局。在桌面上,侧边栏应浮动在主要内容的左侧,在平板电脑/移动设备上,侧边栏应与主要内容重叠(激活时)。我已经设法让这个布局适用于桌面,虽然我使用主要内容的背景颜色使其“看起来”像侧边栏是全高,这是不理想的,但似乎无法包装我对如何使这个平板电脑/移动设备工作有所了解。请参阅图片以更好地解释我想要实现的目标。当窗口缩小不到980px时,身体似乎想要留在980.任何帮助都将非常感激
#sidebar {
background: #FFF8DC;
width: 300px;
float: left;
height: 100vh;
margin-right: -300px;
position: absolute;
top: 0;
left: 0;
}
#main-content {
float: left;
width: 100%;
padding-left: 300px;
background: #2373DE;
}
@media screen and (max-width: 991px) and (min-width: 768px) {
#main-content {
padding-left: 0;
}
#sidebar {
z-index: 9;
}
}
<body>
<section id="sidebar">
sidebar stuff
</section>
<section id="main-content">
main content stuff
<footer>
footer stuff
</footer>
</section>
</body>
答案 0 :(得分:0)
这是一个解决方案,使侧边栏固定在左侧,屏幕高度为100%,主要内容为滚动。您可以更改媒体查询中侧边栏和主要内容的属性(宽度,边距左侧),以获得所需的布局。
#sidebar {
background: #FFF8DC;
top: 0;
left: 0;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
overflow-y: auto;
position: fixed;
width: 300px;
}
#main-content {
margin-left: 300px;
}
@media screen and (max-width: 991px) and (min-width: 768px) {
#sidebar {
width: 200px;
}
#main-content {
margin-left: 200px;
}
}
<body>
<section id="sidebar">
sidebar stuff
</section>
<section id="main-content">
main content stuff
<footer>
footer stuff
</footer>
</section>
</body>