Question

我目前正在使用具有两个并排的 div 元素的 flexbox 进行布局。主要内容需要填充页面的高度和宽度。但是，我在为左侧列出我的项目的内容设置样式时遇到问题，其高度不会比右侧的容器大，并且会隐藏超出该高度范围的所有项目。

我在此处使用 jsfiddle 创建了一个基本示例，说明我的应用程序中发生的情况：https://jsfiddle.net/od09mjgh/9/

如您所见，左侧的项目正在推动页面滚动，但我希望实现一种方法将它们保持在与其兄弟高度相同的容器内，并让容器 overflow-y: auto其余的物品。这可能吗？

这是我的基本示例的代码：

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background-color: red;
  height: 50px;
  flex: 0 0 auto;
}

footer {
  width: 100%;
  background-color: purple;
  height: 100px;
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

#map {
  order: 2;
  flex-grow: 1;
  z-index: 5;
  min-height: 400px;
  position: relative;
  height: 100%;
  background-color: green;
}

#results {
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
}

<header class="header">

</header>
<main>
  <div class="container">
    <div id="map">

    </div>
    <div id="results">
      <div class="extra-div">

      </div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer">

</footer>

Answer 1

您需要一个脚本来执行此操作。

将左框的高度设置为“0”：#results { height: 0; }。这样它就不会因调整右侧框的大小而受到干扰。
在 DOM 加载后使用 Eventlistener 运行函数：document.addEventListener('DOMContentLoaded', boxResize);
如果浏览器调整大小以保持“最新”，也可以使用 Eventlistner 再次运行相同的功能：window.addEventListener('resize', boxResize);
在 JS 中获取右侧框的高度并将其保存为变量：let divA = document.querySelector("#map").offsetHeight;
使用变量的大小调整左框的大小：document.querySelector("#results").style.height = divA + "px";

document.addEventListener('DOMContentLoaded', boxResize);
window.addEventListener('resize', boxResize);

function boxResize() {
  let divA = document.querySelector("#map").offsetHeight,
      divB = document.querySelector("#results");
  divB.style.height = divA + "px";
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  background-color: red;
  height: 50px;
  flex: 0 0 auto;
}

footer {
  width: 100%;
  background-color: purple;
  height: 100px;
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

#map {
  order: 2;
  flex-grow: 1;
  z-index: 5;
  min-height: 400px;
  position: relative;
  height: 100%;
  background-color: green;
}

#results {
  height: 0;
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000;
}

<header class="header">

</header>
<main>
  <div class="container">
    <div id="map">

    </div>
    <div id="results">
      <div class="extra-div">

      </div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer">

</footer>

Answer 2

我想我了解您要构建的布局。如果我的理解是正确的，将高度设置为 100vh 将为您解决所有问题。

这是一个 working example。

   .container {
      height: 100vh;
      width: 100%;
      max-width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex: 1;
    }

Answer 3

您需要对 main 设置高度限制，以作为 overflow 函数的触发器。

这是代码的修订版：

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  flex: 0 0 50px;
  background-color: red;
}

footer {
  flex: 0 0 100px;
  background-color: purple;
}

main {
  height: calc(100vh - 150px);  /* less header and footer heights */
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  min-height: 0;
}

#map {
  order: 2;
  flex: 1 0 400px;
  z-index: 5;
  position: relative;
  background-color: green;
}

#results {
  order: 1;
  min-width: 200px;
  max-width: 375px;
  padding: 0;
  z-index: 10;
  display: flex;
}

.result-items {
  overflow-y: auto;
  width: 100%;
}

.result {
  background-color: aqua;
  height: 75px;
  border-bottom: 1px solid #000;
}

<header class="header"></header>
<main>
  <div class="container">
    <div id="map"></div>
    <div id="results">
      <div class="extra-div"></div>
      <div class="result-items">
        <div id="item-1" class="result">
          <span>Item 1</span>
        </div>
        <div id="item-2" class="result">
          <span>Item 2</span>
        </div>
        <div id="item-3" class="result">
          <span>Item 3</span>
        </div>
        <div id="item-4" class="result">
          <span>Item 4</span>
        </div>
        <div id="item-5" class="result">
          <span>Item 5</span>
        </div>
        <div id="item-6" class="result">
          <span>Item 6</span>
        </div>
        <div id="item-7" class="result">
          <span>Item 7</span>
        </div>
        <div id="item-8" class="result">
          <span>Item 8</span>
        </div>
        <div id="item-9" class="result">
          <span>Item 9</span>
        </div>
        <div id="item-10" class="result">
          <span>Item 10</span>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="footer"></footer>

如何使用flex使div与兄弟和overflow-y auto具有相同的高度

3 个答案: