111

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

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

div如果需要，如果挂在窗口外，如何使其内容仅可滚动？

4

9 回答 9

118

你可能做不到。这是接近的东西。如果下面有空间，您将不会让内容围绕它流动。

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%;
}
于 2013-09-19T12:29:06.850 回答
48

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

<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/

于 2016-01-06T17:48:24.210 回答
12

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

overflow-y: scroll;
max-height: 100%;
于 2017-04-06T19:12:46.877 回答
8

你可能需要一个内部 div。使用css是：

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}
于 2014-05-19T13:26:54.407 回答
3

这完全可以通过一些 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+

于 2015-10-23T07:58:23.740 回答
3

这是纯HTML 和 CSS解决方案。

  1. 我们为导航栏创建一个容器盒，位置：固定；高度：100%；

  2. 然后我们创建一个高度为 100% 的内盒；溢出-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：

于 2017-06-01T11:46:54.177 回答
0

我将此作为一种解决方法而不是解决方案。这可能不会一直有效。我这样做是因为我正在做一个非常基本的 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>
于 2017-10-12T03:10:22.870 回答
0

将此添加到您的代码中以获得固定高度并添加一个滚动条。

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}
于 2018-10-08T08:51:55.023 回答
0

为了您的目的，您可以使用

position: absolute;
top: 0%;

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

于 2020-06-09T10:04:18.447 回答