我创建了具有页面内容的侧边栏,如下所示(Example):
<div id="sidebar">
<nav>
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet ... More content</p>
</div>
和CSS:
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
opacity: 0.90; /* Used opacity to show content behind */
}
如果侧边栏内容很大,我需要侧边栏填充整个屏幕并垂直滚动...
但是如果后面的内容很大,我不希望边栏滚动...
在此示例中,Y滚动是因为即使侧边栏的内容不大,后面的内容也很大。
如何解决这个问题?
答案 0 :(得分:0)
可能是这样:
body {
overflow-y: hidden;
}
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
opacity: 0.90;
height: 100vh;
overflow-y: auto;
}
<div id="sidebar">
<nav>
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet ... More content</p>
</div>