Html 我怎样才能让这个div达到100%的高度?(集装箱上的flexbox)
我的Html 我怎样才能让这个div达到100%的高度?(集装箱上的flexbox),html,css,height,flexbox,Html,Css,Height,Flexbox,我的div有问题,无法达到高度:100%,我尝试使用!重要信息,但这没有帮助。我想这与我容器上的flexbox有关 它是div类`我想要达到100%的列表 JSFiddle: HTML: <div class="row equal-height"> <!-- START BS ROW --> <div class="col-md-1"> <!-- START BS COL-MD-1 --> </div> <!--
div有问题,无法达到高度:100%
,我尝试使用!重要信息
,但这没有帮助。我想这与我容器上的flexbox有关
它是div
类`我想要达到100%的列表
JSFiddle:
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 -->
有什么想法吗
编辑:一些人建议,为了解决这个问题,我需要将高度:100%
设置为所有父元素。所以我试着这么做。但问题是,当我这样做时,带有类单页列表样式
和单头内容样式
的div元素的高度不同(307px和267px)。这就是等高
类中“flex”的目的,为了使这两个元素具有相同的高度(同时根据其内容调整高度),在这种情况下,这两个元素的高度都应为307px。当height:100%
添加到所有父元素时,这将不再起作用。有关更多详细信息,请参阅下面评论中的对话以获取答案。这里是jsfiddle:要么确保所有父标记都具有height:100%
属性,要么最终只填充当前标记的100%
您可以使用身高:100vh
代替,使用您的身高作为最大身高
改为使用100vh意味着无论div高度如何,p标签都将是车身的100%高度
您可以查看更详细的信息。嗨,我无法让它工作。如果我将100%的高度添加到父元素,flexbox将失去其功能,列的高度也将不同:另请参见上面答案的注释:)
/***** 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;
}