Html 仅当固定元素的内容超过视口的高度时，如何才能使其内容可滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18894400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
提问by Mkoch
I have a divpositioned fixedon the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the divwill be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixedand the divwon't scroll.)
我在网页的左侧有一个div定位fixed，包含菜单和导航链接。它没有从css设置高度，内容决定高度，宽度是固定的。问题是如果内容太多，div会大于窗口的高度，部分内容将不可见。（滚动窗口无济于事，因为位置是fixed并且div不会滚动。）
I tried to set overflow-y:auto;but that doesn't help either, the div doesn't seem to notice that part of it is outside of the window.
我试图设置，overflow-y:auto;但这也无济于事，div 似乎没有注意到它的一部分在窗口之外。
How can I make it's contents scrollable only, if needed, if the divhangs out of the window?
如果需要，如果div挂在窗口外，我怎样才能使它的内容仅可滚动？
回答by isherwood
You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.
你可能不能。这是接近的东西。如果下方有空间，您将无法获得内容。
http://jsfiddle.net/ThnLk/1289
http://jsfiddle.net/ThnLk/1289
.stuck {
position: fixed;
top: 10px;
left: 10px;
bottom: 10px;
width: 180px;
overflow-y: scroll;
}
You can do a percentage height as well:
你也可以做一个百分比高度：
http://jsfiddle.net/ThnLk/1287/
http://jsfiddle.net/ThnLk/1287/
.stuck {
max-height: 100%;
}
回答by Ryan Brackett
The link below will demonstrate how I accomplished this. Not very hard - just have to use some clever front-end dev!!
下面的链接将展示我是如何做到这一点的。不是很难 - 只需要使用一些聪明的前端开发人员！
<div style="position: fixed; bottom: 0%; top: 0%;">
<div style="overflow-y: scroll; height: 100%;">
Menu HTML goes in here
</div>
</div>
回答by Aureliano Far Suau
You probably need an inner div. With css is:
您可能需要一个内部 div。用 css 是：
.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
width: 200px; // your value
}
.inner {
min-height: 100%;
}
回答by Lucas Bustamante
Try this on your position:fixed element.
在您的位置上试试这个：固定元素。
overflow-y: scroll;
max-height: 100%;
回答by transGLUKator
This is absolutely doable with some flexbox magic. Have a look at this pen.
这绝对可以通过一些 flexbox 魔法来实现。看看这支笔。
You need css like this:
你需要这样的 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+
这将适用于IE10+
回答by Manoj Negi
Here is the pure HTML and CSSsolution.
这是纯HTML 和 CSS解决方案。
We create a container box for navbar with position: fixed; height:100%;
Then we create an inner box with height: 100%; overflow-y: scroll;
Next, we put out content inside that box.
我们为导航栏创建了一个容器框，位置为：fixed；高度：100%；
然后我们创建一个高度为：100% 的内盒；溢出-y：滚动；
接下来，我们把内容放在那个盒子里。
Here is the code:
这是代码：
.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>回答by Tyler Montney
I'm presenting this as a workaroundrather than a solution. This may not work all the time. I did it this way as I'm doing a very basic HTML page, for internal use, in a very bizarre environment. I know there are libraries like MaterializeCSS that can do really nice nav bars. (I was going to use them, but it didn't work with my environment.)
我将此作为一种解决方法而不是解决方案。这可能不会一直奏效。我这样做是因为我在一个非常奇怪的环境中做一个非常基本的 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>
回答by Saurav Sen
Add this to your code for fixed height and add one scroll.
将此添加到您的代码中以获得固定高度并添加一个卷轴。
.fixedbox {
max-height: auto;
overflow-y: scroll;
}
