多选框上的溢出正在改变文档高度

Question

我有一个使用以下css在y方向滚动的div：

// [[Rcpp::plugins(cpp11)]]
// [[Rcpp::depends(RcppArmadillo)]]
#include <RcppArmadilloExtensions/sample.h>

typedef decltype(Rcpp::sugar::SeqLen(1)[0]) rvalue_t;
typedef decltype(Rcpp::IntegerVector::create(1)[0]) lvalue_ref_t;

// [[Rcpp::export]]
void test() {
    // rvalue_t is an rvalue
    Rcpp::Rcout
        << std::is_rvalue_reference<rvalue_t&&>::value
        << "\n";
    // lvalue_ref_t is an lvalue
    Rcpp::Rcout
        << std::is_lvalue_reference<lvalue_ref_t>::value
        << "\n";

    // rvalue_t is _not_ assignable
    Rcpp::Rcout
        << std::is_assignable<rvalue_t, R_xlen_t>::value
        << "\n";
    // lvalue_ref_t is assignable
    Rcpp::Rcout
        << std::is_assignable<lvalue_ref_t, R_xlen_t>::value
        << "\n";
}

/*** R

test()
# 1     ## true
# 1     ## true
# 0     ## false
# 1     ## true

*/ 

问题是文本框中可能包含数百个行项目，溢出（虽然不可见）正在扩展整个页面的整体高度，并且它超出了页面的页脚。

我基本上需要隐藏溢出超过300px的高度。但是，显然如果我溢出：隐藏，我根本没有得到垂直滚动条。

Answer 1

尝试将overflow设置为scroll，应该这样做。

.overflow {
  display: block;
  height: 300px;
  overflow-y: scroll;
  background-color: white;
  border: 1px solid #AEAEAE;
  margin: 30px;
}

<div class="overflow">
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>

</div>

这对我来说很有效。

Answer 2

我认为这可以帮到你

你可以选择 显示：内联块 - 这用于您要调整的宽度，如width:100px or width:50%

显示：块; - 这用于宽度100％

＆＃13;

＆＃13;

.overflow {
  display: block;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid black;
  background-color: yellow;
}

＆＃13;

<div class="overflow">
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>

</div>

＆＃13;

＆＃13;

＆＃13;