如何设置子div高度与父

时间：2017-10-28 07:35:22

标签： html css

可能是一个重复的问题。其他＆＃39;不符合我的要求
我有3个子div（secound-div-inner-single（类名））。
  我必须将此3 div的高度设置为与父级的高度相同 div（secound-div-inner）或只是3个div，其高度与最大的Click here的高度相同

＆＃13;
＆＃13; 
    .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;
        
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

当屏幕大小改变时，子div应该表现为行

2 个答案:

答案 0 :(得分：3)

您可以在#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>

希望这有帮助！

答案 1 :(得分：2)

你是对的，这是一个重复的问题。但是，到目前为止，您有多种方法可以解决此问题：

适用于现代浏览器

如果您不需要支持旧版浏览器（尤其是IE10 /旧版），则可以使用网格或 flexbox 设计。这些方法的好处是，它很容易实现，并且生成的代码相当简洁，因此易于理解。

使用flexbox： 

#parent {
    display: flex;
}

.children {
    height: 100%;
}

这很简单，但如果您的设计变得越来越复杂，将会变得困难。在这种情况下，您可以移动到网格...

使用网格：

网格的优点是默认情况下所有网格子元素都具有相同的高度。在定义它们之间的差距时，它们还为您提供了很大的灵活性。然而，虽然FIRST网格子项将具有其行的高度，但内部子项（在您的情况下是嵌套的div）将只占用他们需要的空间 - 除非您同时创建它们display:grid或者给它们{{ 1}}。这是一个例子：

height:100%

适用于旧版浏览器

老实说，这确实很痛苦。您似乎使用bootstrap或类似的框架。有一些技巧可以实现这一点（例如enter link description here），但从我的经验来看，这一切都相当乏味。

通常，您的方法可以是确保所有元素（父元素和所有id嵌套子元素）向下传递100％height属性。但它有自己的优点和缺点。你会找到很多解决这个问题的建议，但正如我所说：如果你不需要兼容性，使用不同的方法有很多好处。

相关问题
最新问题