通过CSS根据另一个div调整div的高度 [英] adjust a div's height based on another div by CSS

问题描述

我有两个DIV(一个是侧边栏，另一个是内容部分)，我需要具有相同的高度，但是我遇到了问题.侧边栏包含一些li.我希望边栏的高度与内容部分的高度相同，但是当我使用flex时，边栏的高度可以比内容部分长(因为这两个部分都是动态的).因此，我需要在高度大于内容部分时滚动边栏.

I have two DIVs (one is a sidebar and the other one is a content part) that I need to have the same height but I have a problem. The sidebar includes some lis. I want the height of the sidebar to be the same as the content part but when I use flex, the height of the sidebar can be longer than the content part (because both parts are dynamic). So I need the sidebar to be scrolled when the height is longer than the content part.

<section class="container">
    <div class="sidebar">
        <ul>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
        </ul>
    </div>
    <div class="content"></div>
</section>

我的CSS代码:

.container {
    display: flex;
}
.sidebar,.content {
    flex: 1 0 auto;
}

我什至使用了JQuery，但是我们看到错误的高度，因为图像在内容部分中的加载速度很慢.

I even used JQuery but we see the wrong height because images are being loaded slowly in the content part.

我的JQuery代码:

My JQuery code:

jQuery(document).ready(function($) {

    $(".sidebar").height($(".content").height());

});

我什至使用了以下代码，但没有任何反应:

I even used the following code but nothing happens:

jQuery( window ).load(function($) {

    $(".sidebar").height($(".content").height());

});

我不想使用position:absolute，因为...您可以在此链接中看到我的页面:

I do not want to use position:absolute because... You can see my page in this link: https://end-eng.com/landing-grammar/

推荐答案

我希望在边栏长于内容时滚动边栏.所以我用纯CSS解决了它:
我的新HTML代码:

as I told above, I wanted sidebar to be scrolled when the sidebar is longer than content. so I solved it by pure CSS:
my new HTML code:

<section class="container">
    <div class="sidebar">
        <div class="sidebardiv">
            <ul>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
</section>

我的新CSS代码:

.container {
    display: flex;
}
.sidebar , .content {
    flex: 1 0 auto;
}
.sidebardiv {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow: auto;
    padding: 0 8px 0 8px;
}

这篇关于通过CSS根据另一个div调整div的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！