html - 如何将子div高度设置为与父div相同

Question

可能是重复的问题。别人的不符合我的要求
我有 3 个子 div(secound-div-inner-single(类名))。
我必须将这 3 个 div 的高度设置为与父级的高度相同div(second-div-inner) 或简单的 3 个 div，高度与最大一个的高度相同

    .secound-div {
        padding: 2rem 1rem;
        margin-bottom: 1rem;
        background-color: #333;
        border-radius: 0.3rem;
        margin-top: 1rem;
        display: inline-block;
        width: 100%;
    }
    
    .secound-div-letter-color {
        color: #fff;
    }
    
    .secound-div-heading {
        color: #e9e03b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .labels {
        color: #e9e03b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .secound-div-heading2 {
        color: #b4b00b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .secound-div-inner {
        text-align: center;
        background-color: #333;
        font-size: medium;
        font-weight: 500;
        font-family: 'Times New Roman';
        color: #e9e03b;
        height: 100%;
    }
    
    .secound-div-inner-single {
        background-color: #fff;
        color: #b4b00b;
        padding: 25px;
        margin-bottom: 1rem;
        
    }

<div class="container-fluid">
     <div class="row">
        <div id="#About" class="col-md-12">
        <div class="secound-div">
        <hr class="line" />
        <div class="secound-div-heading">
            <h1>Heading</h1>
        </div>
        <hr class="line" />
        <div id="parent" class="secound-div-inner">
            <div class="col-md-4">
                <div id="child" class="secound-div-inner-single">
                    <div class="secound-div-heading2 ">
                        <h1>Heading 1</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div1
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="secound-div-inner-single">
                    <div class="secound-div-heading2">
                        <h1>Heading 2</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div2
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="secound-div-inner-single">
                    <div class="secound-div-heading2">
                        <h1>Heading 3</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div3
                    </p>
                </div>
            </div>
        </div>
        </div>
        </div>
        </div>
    <div>

当屏幕尺寸改变时，子 div 应该表现为行

Answer 1

您可以在 #parent 上使用 CSS Flexbox，例如:

#parent {
  display: flex;
  flex-wrap: wrap; /* to wrap the divs on smaller devices (mobile) */
}

并给 .secound-div-inner-single height: 100%，比如:

.secound-div-inner-single {
  height: 100%;
}

看看下面的代码片段(使用整页预览):

#parent {
  display: flex;
  flex-wrap: wrap;
}

.secound-div {
    padding: 2rem 1rem;
    margin-bottom: 1rem;
    background-color: #333;
    border-radius: 0.3rem;
    margin-top: 1rem;
    display: inline-block;
    width: 100%;
}

.secound-div-letter-color {
    color: #fff;
}

.secound-div-heading {
    color: #e9e03b;
    text-align: center;
    font-family: 'Times New Roman';
}

.labels {
    color: #e9e03b;
    text-align: center;
    font-family: 'Times New Roman';
}

.secound-div-heading2 {
    color: #b4b00b;
    text-align: center;
    font-family: 'Times New Roman';
}

.secound-div-inner {
    text-align: center;
    background-color: #333;
    font-size: medium;
    font-weight: 500;
    font-family: 'Times New Roman';
    color: #e9e03b;
    height: 100%;
}

.secound-div-inner .col-md-4 {
    flex-basis: 33.33%;
    padding: 15px;
}

.secound-div-inner-single {
    background-color: #fff;
    color: #b4b00b;
    padding: 25px;
    margin-bottom: 1rem;
    height: 100%;
}

.secound-div-inner .col-md-4 {
    flex-basis: 33.33%;
    padding: 0 15px;
}

@media screen and (max-width: 767px) {
  .secound-div-inner .col-md-4 {
      flex-basis: 100%;
      padding: 15px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
 <div class="row">
    <div id="#About" class="col-md-12">
    <div class="secound-div">
    <hr class="line" />
    <div class="secound-div-heading">
        <h1>Heading</h1>
    </div>
    <hr class="line" />
    <div id="parent" class="secound-div-inner">
        <div class="col-md-4">
            <div id="child" class="secound-div-inner-single">
                <div class="secound-div-heading2 ">
                    <h1>Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div1
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="secound-div-inner-single">
                <div class="secound-div-heading2">
                    <h1>Heading 2</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div2
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="secound-div-inner-single">
                <div class="secound-div-heading2">
                    <h1>Heading 3</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div3
                </p>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
<div>

希望这对您有所帮助!