Question

我正在尝试让用户在div内container响应（我的身高），当用户向上调整大小时，如果您现在看到它发生时滚动消失，箭头也消失。

当我向上调整大小时，我可以让这两个卷轴响应而不会消失吗？

我的意思是用户始终可以看到使用箭头导航文本？

上面的图片显示了当用户向上调整浏览器大小时箭头消失的位置，因此我希望我的绿色div能够响应，并且始终显示箭头。

编辑：宽度很好我正在尝试修复高度，以便在用户从底部调整大小以便向上理解？

的CSS：

html,
body {
  background-color: palette(dark-white);
  font: $font-weight--normal $font-size-root/#{$line-height-base} $font-family--primary;
  // height: 100%;
  width: 100%;
  border:1px solid red;
  overflow-y: hidden;
}

.sidebar-left-test {
    height:500px;
    width:30%;
    border:1px solid green;
    overflow-y:scroll;
}

.content{
    height: 500px;
    width:70%;
    border:1px solid black;
    overflow-y:scroll;
}

HTML：

<div class="container-fluid">
  <div class="md-col-12">
    header
  </div>
  <div class="col-md-4">
    <div class="sidebar-left-test">
      md-4
      <br> md-4
      <br> md-4
      <br> md-4
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="content">
      content
    </div>
  </div>
</div>

jsfiddle：https://jsfiddle.net/q7kjm9pn/

Answer 1

要使滚动条始终可见，您可以使用以下代码：

/*Scroll bar nav*/
::-webkit-scrollbar {
    width: 12px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: #dddddd;    
}

但是，如果有足够的空间不需要滚动，拇指将永远消失。

Answer 2

我想这会奏效。您也可以设置拇指的样式。

::-webkit-scrollbar {
    width: 12px !important;
}
::-webkit-scrollbar-track {
    background: #dddddd;    
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Answer 3

根据我的评论，这是bootply中的答案。我在下面的代码段中添加了评论，以便您可以看到样式正在做什么

＆＃13;

/* CSS used here will be applied after bootstrap.css */

html,
body {
  background-color: palette(dark-white);
  height:100%;
  width:100%;
  border:1px solid red;
  overflow-y:hidden;
}
.sidebar-left-test {
  width: 30%;
  border: 1px solid green;
  overflow-y: scroll;
}
.content {
  width: 70%;
  border: 1px solid black;
  overflow-y: scroll;
}

/* new styles */
.container-fluid {
  display: flex;          /* make outer container flex */
  flex-direction: column;  /* make md col 12 divs into 2 rows */
  flex-wrap: wrap;
  height: 100%;           /* make the height of the container 100% of the body if less than max height */
  max-height: 600px;      /* max height of the container */
}
.md-col-12 {
  width: 100%;            /* make sure these rows take up 100% width*/
}
#header {
  flex-grow: 0;   /* this is so that the header is as high as it's content */
}
#body {
  flex-grow: 1;   /* this makes the body take up the rest of the height inside the container */
  display: flex;  /* make this flex as well so we can get the two child divs to be 100% height */
  flex-direction: row;  /* make the child divs into columns */
}
#body > div,
#body > div > div {
  /* these make the child divs and their children grow to fill the height of the columns in the body */
  display: flex;  
  flex-grow: 1;
}

＆＃13;

<div class="container-fluid">
  <div class="md-col-12" id="header">
    header
  </div>
  <div class="md-col-12" id="body">
    <!-- I have added this wrapping div for the body -->
    <div class="col-md-4">
      <div class="sidebar-left-test">
        md-4
        <br>md-4
        <br>md-4
        <br>md-4
        <br>
      </div>
    </div>
    <div class="col-md-8">
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>

＆＃13;

CSS：当用户向上调整容器大小时，如何让容器内的div响应滚动条

3 个答案: