Question

我想在一行中构建三个div（每个宽度为33％）。一个div有一个孩子，如果内容太大，内容应滚动。不是身体！

我做了一个草图：

我用柔性盒试了一下，但整个身体都会滚动。有人可以帮帮我吗？

Answer 1

这似乎有效。在调整窗口大小时，元素也会调整大小，以便只有在没有足够空间显示所有内容时才能滚动。

setWindowHeight();

function setWindowHeight() {
  var windowHeight = window.innerHeight;
  document.body.style.height = windowHeight + "px";
}

window.addEventListener("resize", setWindowHeight, false);

.float {
  float: left;
  width: 33%;
  height: 100%;
}
.left {
  background: #f00;
}
.center {
  background: #0f0;
}
.right {
  background: #00f;
}
.scrollable {
  height: 100%;
  overflow-y: scroll;
}

<body>
  <div class="float left">
    Left
  </div>
  <div class="float center">
    <div>
      Center
    </div>
    <div class="scrollable">
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
      <p>Scrollable</p>
    </div>
  </div>
  <div class="float right">
    Right
  </div>
</body>

排成三行，可以在溢出时滚动

1 个答案: