Question

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

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

如果div挂出窗外，如何才能使其内容可滚动？

Answer 1

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

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%;
}

Answer 2

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

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

Answer 3

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

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

Answer 4

这对于一些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+

Answer 5

在您的位置上尝试：固定元素。

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

Answer 6

以下是纯 HTML和CSS 解决方案。

我们为导航栏创建了一个容器框位置：固定; 高度：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:

Answer 7

我将此作为解决方法而不是解决方案。这可能不会一直有效。我是这样做的，因为我正在做一个非常基本的HTML页面，供内部使用，在一个非常奇怪的环境中。我知道像MaterialiseCSS这样的库可以做很好的导航栏。（我打算使用它们，但它对我的环境没有用。）

while($r = $sth->fetch()){
    if ($r['status']=='good'){
        echo '<tr><td>This is good</td><td>yes it is</td></tr>';
    }
    else{
        echo '<tr><td colspan="2">this is bad</td></tr>';
    }
}

Answer 8

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

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

Answer 9

出于您的目的，您可以使用

find . -maxdepth 1 -type f -name 'video *' -print0 | sort -z -k2 | xargs -0 mpv

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

Answer 10

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

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

10 个答案: