Question

我想禁止在.content div上滚动。并且仅在.nav div溢出时启用滚动。.

body{
  margin:0;
  padding:0;
  background-color:#f1f1f1;
}

.container {
  min-height: 100vh;
  width:100%;
  display:grid;
  grid-template-rows:60px 1fr;
}
.header {
  background:white;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 4px grey;
}

.content {
  overflow:hidden;
  display:grid;
  grid-template-columns:200px 1fr 250px;
}

.nav {
  background-color:white;
  overflow-y:scroll;
}

CodePen链接：https://codepen.io/chandu0101/pen/dyyQEaR

Answer 1

由于.content将具有其子代的高度，但是将其强制具有特定的高度，它将执行您想要的操作，只需将height: 80vh;或您想要的任何高度添加到您的{{ 1}}类

Answer 2

div将自动扩展以适合其内容。赋予.content高度或max-height，它将停止扩展。

.content {
  overflow:hidden;
  display:grid;
  grid-template-columns:200px 1fr 250px;
  height: 200px; /* <-- */
}

Answer 3

由于您尚未为自己let array = ['a', 'b', 'c', 'a', 'b', 'c']; const re = /(b|c)/ array = array.filter(el => !re.test(el)); console.log(array);定义身高，因此它会根据需要提高身高。为了限制高度，您可以将其设置为固定高度（在下面的代码中，它等于最大高度减去标头高度）。这样，您甚至不需要.nav，因为它会多余。

为导航添加固定高度：

overflow-y: scroll

为什么CSS溢出隐藏在这种情况下不起作用

3 个答案: