主页 / coding / 问题 / 78576848
Accepted
epatmalnieks
Asked: 2024-06-05 01:12:00 +0800 CST

当内容较少时垂直缩小div

  • 772

我希望当蓝色 div 中没有太多内容时，蓝色 div 缩小并允许绿色 div 占用更多空间，反之亦然。但是，如果两个 div 中都有大量内容，则两个 div 都不能大于容器的 50%。

.container {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.topDiv {
  background-color: blue;
  color: white;
  flex: 1;
  overflow: auto;
}

.bottomDiv {
  background-color: green;
  color: white;
  flex: 1;
  overflow: auto;
}
<div class="container">
    <div class="topDiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    </div>
    <div class="bottomDiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    </div>
  </div>

html

1 个回答

  1. Best Answer

    就像 Paulie_D提到的那样，我不确定是否可以使用 flex。但是，如果overflow:auto在两个子 div 上都设置了网格显示，则这是使用网格显示的默认行为。

    顶部 div 有更多内容：

    .container {
    display: grid;
    height: 300px;
}

.topDiv {
    background-color: blue;
    color: white;
    overflow: auto;
}

.bottomDiv {
    background-color: green;
    color: white;
    overflow: auto;
}
    <div class="container">
    <div class="topDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    </div>
    <div class="bottomDiv">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis.</p>
    </div>
</div>

    底部 div 有更多内容：

    .container {
  display: grid;
  height: 300px;
}

.topDiv {
  background-color: blue;
  color: white;
  overflow: auto;
}

.bottomDiv {
  background-color: green;
  color: white;
  overflow: auto;
}
    <div class="container">
  <div class="topDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis</p>
  </div>
  <div class="bottomDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
  </div>
</div>

    两个 div 都有更多内容：

    .container {
    display: grid;
    height: 300px;
}

.topDiv {
    background-color: blue;
    color: white;
    overflow: auto;
}

.bottomDiv {
    background-color: green;
    color: white;
    overflow: auto;
}
    <div class="container">
  <div class="topDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>  </div>
  <div class="bottomDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eius quia a iure, odit corporis, iusto molestiae delectus dolores possimus accusantium voluptatum, nam. Unde atque veritatis quo at, in eligendi.</p>
  </div>
</div>

    • 2

相关问题