如何才能使一个固定元素的内容只有当它超过视图的高度时才可滚动？

我有一个 div定位在网页的左侧 fixed，包含菜单和导航链接。它没有从 css 设置高度，内容决定高度，宽度是固定的。问题是，如果内容太多，div将大于窗口的高度，部分内容将不可见。(滚动窗口没有帮助，因为位置是 fixed，而 div不会滚动。)

我试图设置 overflow-y:auto;，但这也没有帮助，div 似乎没有注意到它的一部分在窗口之外。

如果 div挂在窗口之外，如果需要，我怎样才能使它的内容只可滚动？

356328 次浏览
小开
最佳答案

你可能做不到。这里有一些接近的东西。如果下面有空间的话，你就不会得到围绕它流动的内容。

Http://jsfiddle.net/thnlk/1289

.stuck {
position: fixed;
top: 10px;
left: 10px;
bottom: 10px;
width: 180px;
overflow-y: scroll;
}

你也可以做一个百分比高度:

Http://jsfiddle.net/thnlk/1287/

.stuck {
max-height: 100%;
}
小开

您可能需要一个内部 div:

.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
width: 200px; // your value
}
.inner {
min-height: 100%;
}
小开

这是绝对可行的一些灵活方块魔术。看看这个 钢笔。

你需要这样的 css:

aside {
background-color: cyan;
position: fixed;
max-height: 100vh;
width: 25%;
display: flex;
flex-direction: column;
}


ul {
overflow-y: scroll;
}


section {
width: 75%;
float: right;
background: orange;
}

This will work in IE10 +

小开

下面的链接将展示我是如何做到这一点的。不是很难-只要使用一些聪明的前端开发! ！

<div style="position: fixed; bottom: 0%; top: 0%;">


<div style="overflow-y: scroll; height: 100%;">


Menu HTML goes in here


</div>


</div>

Http://jsfiddle.net/ryanbrackett/b44zn/

小开

在你的位置上试试这个: 固定元素。

overflow-y: scroll;
max-height: 100%;
小开

这是纯 HTML 和 CSS溶液。

  1. We create a container box for navbar with 位置: 固定; 身高: 100%

  2. 然后我们创建一个内部盒子 身高: 100% ; Overflow-y: 滚动;

  3. 接下来，我们把内容放在那个盒子里。

密码如下:

.nav-box{
position: fixed;
border: 1px solid #0a2b1d;
height:100%;
}
.inner-box{
width: 200px;
height: 100%;
overflow-y: scroll;
border: 1px solid #0A246A;
}
.tabs{
border: 3px solid chartreuse;
color:darkred;
}
.content-box p{
height:50px;
text-align:center;
}
<div class="nav-box">
<div class="inner-box">
<div class="tabs"><p>Navbar content Start</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content</p></div>
<div class="tabs"><p>Navbar content End</p></div>
</div>
</div>
<div class="content-box">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>

链接到 jsFiddle:

小开

我提出这作为一个 workaround而不是一个解决方案。这可能不会一直有效。我这样做，因为我正在做一个非常基本的 HTML 页面，内部使用，在一个非常奇怪的环境。我知道有一些库，比如 MaterializeCSS，可以做出非常漂亮的导航栏。(我本来打算使用它们，但它们对我的环境不起作用。)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>
小开

将此添加到您的代码为固定高度，并添加一个滚动。

.fixedbox {
max-height: auto;
overflow-y: scroll;
}
小开

为了你的目的，你可以用

position: absolute;
top: 0%;

它仍然可以调整大小，滚动和响应。


提交答案