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

debugcn 发表于 Dev

拉杜肯

我想补充的滚动条回应（我高）我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/

皮特

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

/* 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;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。