我有一个 .sidebar
和一个 .content
div,包裹在一个 flexbox 中。我想让内容可滚动,同时保持边栏固定。
约束
- 我不会使用 Javascript
- 容器的最大宽度必须为 600px
问题
如果我相对定位它,边栏和内容都会滚动:fiddle
.flex{
position: relative;
display: flex;
flex-direction: row;
max-width: 600px;
margin: auto;
border: 1px solid green;
}
.flex > *{
border: 1px solid green;
}
.sidebar{
width: 200px;
}
.content{
flex: 1;
overflow-y: auto;
}
.content p{
font-size: 48px;
}
如果我绝对定位它,滚动条会留下它漂亮的右 Angular 来环绕 600 像素的容器:fiddle
*{
box-sizing: border-box;
}
.flex-wrapper{
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 600px;
margin: auto;
}
.flex{
display: flex;
flex-direction: row;
border: 1px solid green;
height: 100%;
}
.flex > *{
border: 1px solid green;
}
.sidebar{
width: 200px;
}
.content{
flex: 1;
overflow-y: auto;
}
.content p{
font-size: 48px;
}
我该怎么做才能使滚动条停留在屏幕的右边缘,而不是环绕在固定宽度的 div 周围?
最佳答案
不需要为此使用 Flexbox,只需移除包装器并为侧边栏提供固定位置。
另外我用了一个媒体查询来控制两者的左边缘。
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.sidebar, .content {
border: 1px solid green;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: calc(50% - 300px);
width: 200px;
}
.content {
max-width: 400px;
margin-left: calc(50% - 100px);
}
.content p {
font-size: 48px;
}
@media (max-width: 600px) {
.sidebar {
left: 0;
}
.content {
margin-left: 200px;
}
}
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li>Monkeys</li>
<lI>Pigeons</lI>
</ul>
</div>
<div class="content">
<p>
We have got the best monkeys in entire europe.
</p>
<p>
We have also got some really good pigeons.
</p>
<p>
One pigeon scored more than 1500 in 2016 SAT exams.
</p>
<p>
The monkey was quite jealous of him to be honest.
</p>
<p>
But they are still besties so far... and will be forever
</p>
</div>
关于html - 如何处理滚动条换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44488072/