Question

我想使某个div滚动（橙色，未知高度，可能比视口还大）。该页面包含一个包含3个子级的容器。我需要可滚动的div是这3个孩子之一的一部分。如果将overflow: auto设置为.con，则滚动会像超级按钮一样工作。但是我不需要滚动整个.con。 .b应该始终可见。

html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
}

.a {
  background-color: yellow;
}

.b {
  background-color: orange;
  overflow: auto; /* doesn't work :( */
}

<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123
    </div>
  </div>
</div>

Answer 1

library(dplyr)
library(caret)
mnist <- snedata::download_mnist()
mnist_num <- as.data.frame(lapply(mnist[1:10000,], as.numeric)) %>%
mutate(id = row_number())
mnist_num <- mnist_num[,sapply(mnist_num, function(x){max(x) - min(x) > 0})]

mnist_train <- sample_frac(mnist_num, .70)
mnist_test <- anti_join(mnist_num, mnist_train, by = 'id')

set.seed(5000)
library(gbm)
boost_mnist<-gbm(Label~ .,data=mnist_train, distribution="bernoulli", n.trees=70, 
interaction.depth=4, shrinkage=0.3)

Answer 2

将滚动保持在.con上，并在position:sticky上使用.a

html, body {
  height: 100%;
  margin:0;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
  overflow: auto;
}

.a {
  background-color: yellow;
  position:sticky;
  top:0;
}

.b {
  background-color: orange;
}

* {
 box-sizing:border-box;
}

<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      start<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      end
    </div>
  </div>
</div>

div内的可滚动div，网格布局问题

2 个答案: