内部div在高度为auto的容器内具有100％的高度

问题描述

标记：

<$>

p $ p> < div class =container>
< div class =innerOne inner>< / div>
< div class =innerTwo inner>< / div>
< / div>


在不同的视口 .innerTwo 比 .innerOne 的高，但我想它的背景与 .innerTwo

样式：

  .container {
 width ：100％; 
 height：auto; 
 background-color：yellow; 
 
 / * clearfix * / 
 * zoom：1; 
&：before，
&：after {
 display：table; 
 content：; 
 line-height：0; 
} 
&：after {
 clear：both; 
} 
} 
 
 .inner {
 float：left; 
 width：50％; 
 height：100％; 
 background-color：red; 
} 
  

但是高度不匹配。我知道这可以通过给容器一个设定的高度，但我不想这样做，因为它是一个响应式网站。这可能吗？我宁愿不使用JS。

解决方案

您可以使用 display：table-cell 属性。这样写：

  .container {
 width：100％; 
 border：1px solid red; 
 display：table; 
} 
 .inner {
 display：table-cell; 
 background：green; 
 width：50％; 
} 
 .innerTwo {
 background：blue 
} 
  

选中此

I'm struggling to get a div to expand fully to it's container's height.

Markup:

<div class="container">
  <div class="innerOne inner"></div>
  <div class="innerTwo inner"></div>
</div>

At different viewports .innerTwo's content is taller than that of .innerOne's but I would like it's background to be the same size as .innerTwo's

Styles:

.container {
   width: 100%;
   height: auto;
   background-color: yellow;

   /* clearfix */
   *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
     line-height: 0;
   }
   &:after {
    clear: both;
   }
}

.inner {
   float: left;
   width: 50%;
   height: 100%;
   background-color: red;
}

But the heights wont match up. I know it can be done by giving the container a set height but I don't want to do that since it's a responsive site. Is this possible? I'd rather not use JS.

解决方案

You can use display:table-cell property for this. Write like this:

.container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}

Check this http://jsfiddle.net/XXHTC/

这篇关于内部div在高度为auto的容器内具有100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！