首页 文章

如何使固定元素的内容仅在超出视口高度时才可滚动？

提问于
浏览 次
66

我在网页的左侧有一个 div fixed ，其中包含菜单和导航链接 . 它没有从css设置的高度，内容决定高度，宽度是固定的 . 问题是如果内容太多， div 将大于窗口's height, and part of the content will not be visible. (Scrolling the window doesn' t帮助，因为位置是 fixed 而 div 不会滚动 . ）

我试图设置 overflow-y:auto; ，但似乎并没有注意到它的一部分在窗口之外 .

如果 div 挂出窗外，如何只在需要时才能使其内容可滚动？

html css css-position

9 回答

  • 68

    下面的链接将演示我是如何完成此任务的 . 不是很难 - 只需要使用一些聪明的前端开发！

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

    回复于
  • -2

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

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

    你可能不会 . 这是接近的事情 . 如果下面有空格，你不会得到满足它的内容 .

    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%;
}
    回复于
  • 2

    这对于一些flexbox魔术是绝对可行的 . 看看这个pen .

    你需要这样的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+中有效

    回复于
  • 26

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

    overflow-y: scroll;
max-height: 100%;
    回复于
  • 6

    这是纯粹的 HTML and CSS 解决方案 .

    • 我们为导航栏创建一个容器框，其位置为：fixed;高度：100％;

    • 然后我们创建一个高度为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>

    Link to jsFiddle:

    回复于
  • 2

    我将此作为 workaround 呈现而不是解决方案 . 这可能不会一直有效 . 我这样做是因为我在环境中工作 . ）

    <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>
    回复于
  • 1

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

    .fixedbox {
    max-height: auto;
    overflow-y: scroll;
}
    回复于
  • 0

    我认为这不会起作用，否则你将不得不为此编写脚本 . 如果我正确地得到你的问题，那么我建议你使用this解决方案

    回复于

相关问题