固定的位置div可滚动
我有一个fixed在网页左侧的div ，包含菜单和导航链接。 它没有从CSS设置高度，内容决定高度，宽度是固定的。 问题是，如果内容太多， div将大于窗口的高度，部分内容将不可见。 （滚动窗口没有帮助，因为位置是fixed ， div不会滚动。）
我试图设置overflow-y:auto; 但这也没有帮助，div似乎没有注意到它的一部分是在窗口之外。
如果需要，如果div挂在窗外，我怎样才能使其内容可以滚动？
你可能不能。 这是接近的东西。 如果下面有空间的话，你将不会得到满足的内容。
.stuck { position: fixed; top: 10px; left: 10px; bottom: 10px; width: 180px; overflow-y: auto; }
更新：你也可以做一个百分比高度：
.stuck { max-height: 100%; }
下面的链接将演示我是如何完成这个的。 不是很难 – 只需要使用一些聪明的前端开发！
<div style="position: fixed; bottom: 0%; top: 0%;"> <div style="overflow-y: scroll; height: 100%;"> Menu HTML goes in here </div> </div>
你可能需要一个内部的div。 用CSS是：
.fixed { position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; width: 200px; // your value } .inner { min-height: 100%; }
这是一些flexbox魔术绝对可行的。 看看这支笔 。
你需要像这样的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; }
这将在IE10 +中工作
这是纯HTML和CSS解决scheme。
-
我们创build一个导航栏的位置：固定的容器框; 高度：100％;
-
然后我们创build一个高度为100％的内框。 overflow-y：scroll;
-
接下来，我们将内容放在该框中。
这里是代码：
.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>
我提出这是一个解决方法，而不是一个解决scheme。 这可能无法一直工作。 我这样做，因为我正在做一个非常基本的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>
试试这个你的位置：固定元素。
overflow-y: scroll; max-height: 100%;
我不认为这会工作，否则你将不得不为此编写脚本。 如果我正确地得到你的问题，那么我会build议你使用这种解决scheme
