Question

我遇到div的问题我无法访问height:100%，我尝试使用!important，但这并没有帮助。我想我的容器.row上的我的Flexbox有一些关系吗？

div是我想要达到100％的类列表。

HTML：

<div class="row equal-height"> <!-- START BS ROW -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
        <div class="singlepage-list-style"> <!-- START SINGLEPAGE-LIST-STYLE -->
            <div class="list-header"> <!-- START LISTE-HEADER -->
                <h1>Quick info</h1>
            </div> <!-- END LIST-HEADER -->
            <div class="the-list"> <!-- START THE-LISTE -->
            <img src="http://placehold.it/150x100">
            </div> <!-- END THE-LIST -->
        </div>
    </div> <!-- END BS COLD-MD-4 -->
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-6 -->
        <div class="singleheader-content-style"> <!-- START SINGLEPAGE-CONTENT-STYLE -->
            <h1>Property description</h1>
            <img src="http://placehold.it/350x150">
        </div> <!-- END SINGLEHEADER-CONTENT-STYLE -->
    </div> <!-- END BS COL-MD-6 -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
</div> <!-- END BS ROW -->

CSS：

/***** INFO & CONTENT HEIGHT CONTROLER *****/

.equal-height, .equal-height > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 0 auto;
  }

.zeropadding-right {
    padding-right:0px;
}

/***** SINGLEHEADER CONTENT AREA STYLING *****/

.singleheader-content-style {
    background-color:#fff;
    border-right: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
}

.singleheader-content-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

/***** SINGLEHEADER LIST AREA STYLING *****/

.singlepage-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
    font-size:16px;
}

.singlepage-list-style ul li {
    list-style-type:none;
}

.singlepage-list-style ul {
    padding-left:20px;
}

.the-list {
    border-right: 1px solid #9c9c9c;
    width:100%;
}

.list-header {
    width:100%;
}

.list-header h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

有什么想法吗？

编辑：有些人建议要解决此问题，我需要将height:100%设置为所有父元素。所以我试着这样做。但问题是，当我这样做时，具有类singlepage-list-style和singleheader-content-style的div元素最终会有不同的高度（307px和267px）。这就是＆＃34; flex＆＃34;在equal-height类中，为了给这两个元素提供相同的高度（同时调整其内容的高度），在这种情况下，两者都应该以高度307px结束。当height:100%添加到所有父元素时，这不再有效。有关详细信息，请参阅以下答案的注释中的对话。这是jsfiddle：https://jsfiddle.net/5s9mmdtx/

Answer 1

要么确保所有父标记都具有height: 100%属性，要么最终只填充当前标记的100％。

您可以使用height: 100vh代替身体高度作为最大身高。

使用100vh代替意味着无论div高度如何，p标签都将是身体的100％高度。

您可以查看更详细的信息here。

如何让这个div达到100％的高度？（容器上的flexbox）

1 个答案:

如何让这个div达到100％的高度？ （容器上的flexbox）

1 个答案:

如何让这个div达到100％的高度？（容器上的flexbox）