CSS父级div占100％的高度，但ul赢了＆＃x27; t缩水和滚动

发布于 2025-02-11 19:36:27 字数 2913 浏览 0 评论 0原文

我有这个HTML和CSS，它使所有DIV的内部划分到100％。

以下工作原理：

HTML

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
    </div>
  </section>

CSS

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

问题在这里。

除了上述内容，我还需要添加一个标题和列表，该标题和列表也需要缩小或扩展到其父母，即.AREA类别。

当UL太小时需要滚动Y。

因此，这就是我所做的：

HTML

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  </section>

CSS，

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

但此问题是UL不会扩大100％可用空间的空间。

我该如何解决？我需要UL的高度才能响应。

原文

I have this html and css which makes all div's inside divide to 100% height.

The below works as required:

HTML

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
    </div>
  </section>

CSS

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

The problem is here.

Further to the above I need to add a title and list which also needs to shrink or expand to it's parent which is .some-area class.

And when too small the UL needs to scroll Y.

So here is what I've done:

HTML

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  </section>

CSS

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}
  
.some-area {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
}

But the issue with this one is that the UL won't expand 100% of the available space.

How can I fix this? I need the UL height to be responsive.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月静好 2025-02-18 19:36:27

您可以轻松地解决它，而无需弹性。
这是代码：
HTML：

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
</section>

CSS：

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
}
.some-area {
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
    overflow-y: scroll;
}

JS：

let areaNum = document.getElementsByClassName("some-area").length;
for (let area of document.getElementsByClassName("some-area")) {
  area.style.height = 100 / areaNum + "%";
}

注意：此代码将与任意数量的DIVS（某些区域）一起使用，而不仅仅是四个；

You can solve it easily without flex.
Here's the code:
HTML:

<section class="fill-height-or-more">

    <div class="some-area">
        <h5>One</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Two</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Three</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
  
    <div class="some-area">
        <h5>Four</h5>
        <ul style="height: 100%; overflow: scroll">
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
          <li>list here</li>
        </ul>
    </div>
</section>

CSS:

.fill-height-or-more {
    height: 100vh;
    min-height: 100%;
}
.some-area {
    background: hsla(200, 50%, 65%, 1);
    border: 1px dashed yellow;
    overflow-y: scroll;
}

JS:

let areaNum = document.getElementsByClassName("some-area").length;
for (let area of document.getElementsByClassName("some-area")) {
  area.style.height = 100 / areaNum + "%";
}

Note: This code will work with any number of divs (some-areas), not just four;

回复收藏 0 原文

~没有更多了~