Question

I have the following jsfiddle: https://jsfiddle.net/06apx88q/1/

There is a sidebar which can be expanded by clicking on the "show notifications" button. I need this sidebar to take up 100% of the width; from the navbar at the top to the bottom of the screen (and not the bottom of the content).

Setting a height: X% doesn't really fix things, since at 100%, the sidebar goes down below the screen. Some other value has the problem of not working across various vertical heights.

What can I do to make the sidebar take up exactly the space between the navbar and the bottom of the screen, without extending far too below?

Answer 1

i did this and it seemed to work...

.sidebar{
  transition:left ease-in-out 0.5s;
  position:fixed;
  width:100%;
  left:-1000px;
  overflow-y: auto;
  height: 100%;
  background-color: #ffffff;
}

.sidebar.active{
  left: 5px;
}

Answer 2

因为你使用的位置：固定侧边栏的高度取决于整个页面的高度，如果我理解你想要的东西，你必须设置高度（以像素为单位），在这里查看我的示例并根据需要进行编辑：

$("#toggle").click(function () {
  $(".sidebar").toggleClass('active');
});

.wrap{height:300px;border:1px red solid;}
.sidebar{
  transition:left ease-in-out 0.5s;
  position:fixed;
  width:300px;
  left:-500px;
  overflow:auto;
  max-height:150px;
  background-color: #ffffff;
  border:1px solid blue;
}

.sidebar.active{
  left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrap'>


<nav class="navbar navbar-default">
  <button id="toggle" class="btn btn-primary pull-right">Show notifications</button>
</nav>

<div class="container">
  <div class="sidebar">
    <div class="container-fluid">
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
            <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
      <div class="row">
        <p><a href="#">User James Bond made changes to your bed.</a></p>
      </div>
      <hr>
    </div>
  </div>
</div>

<div class="container">
  <h1>Lorem ipsum dolor amet.</h1>
</div>
</div>

Make scrollable div 100% of content, without extending to the bottom

2 个答案: