子div高度与父div不一样 [英] Child divs height isn't the same as parent div

问题描述

我有一个7 divs 包裹在3 divs 中。除了第一个 div 之外的所有元素都设置为 width：0 ，并且它们都被设置为内联块。最外层的 div 的高度设置为 166px 。

<因此，它是唯一的孩子（7） divs 你看，是第一个。问题是，第三个包装（ .wrapperLongInner ）比它的祖父母 div 高。 .wrapperLongInner的高度的计算方式就好像7 divs 放在一个下面，即使它们是边如何获得 .wrapperLongInner code>默认具有与其父母相同的高度？

JSFiddle

$ b

.wrapperShortOuter {overflow：hidden; background-color：lightgreen;}。wrapperLongInner {display：flex; align-items：flex-start; background-color：lightblue;}。content {overflow：hidden;显示：inline-block; width：0;}

< div id =fullWrapper style =height：166px; width：536px;> < div class =wrapperShortOuter> < div class =wrapperLongInnerstyle =width：1072px;> < div class =contentstyle =width：536px;> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。使用最小静态文件< / div> < div class =content>需要尝试练习ullamco laboris nisi ut aliquip ex ea commodo consequat。 duis aute irure dolor in reprehenderit< / div> < div class =content> Tin voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。< / div>< div class =content>如果您有任何疑问，请与我们联系。 ; < div class =content> doloremque laudantium，totam rem aperiam，eaque ipsa quae ab ilo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem< / div> < div class =content> quia voluptas sit aspernatur aut odit aut fugit，sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。< / div> < div class =content> Neque porro quisquam est，qui dolorem ipsum quia dolor sit amet，consectetur，adipisci velit，sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标？ 如果你想让自己的身体恢复到原来的水平，那么你就可以在这个世界上找到自己的位置。< / div>< / div>< / div>< / div> / code>




解决方案

在 .wrapperLongInner 类中输入 height：100％：

c> .wrapperLongInner {
display：flex;
align-items：flex-start;
background-color：lightblue;
height：100％;
}


注意： - 在 Internet Explorer 一个链接机制，它们在高度：100％的情况下使用，因此，你必须给链中的所有div赋予高度：100％，直到一个具有固定高度的父div（不是百分比）如果链断了，高度将不会被应用到div。
对于IE，你需要做一些类似的事情这与上面的代码一起： - $ / $>

  .wrapperShortOuter {
 overflow：hidden; 
 background-color：lightgreen; 
身高：100％; 
} 
  

您可以参考 jsFiddle here。

I have a 7 divs wrapped in 3 divs. All but the first div are set to width: 0, and they are all set to inline-block. The most outer div has a set height of 166px.

So it comes out, the only child (7) divs you see, is the first. The problem is, the third wrapper (.wrapperLongInner), has a larger height than its grandparents div. .wrapperLongInner's height is calculated as if the 7 divs are layed out one under each other, even though they they are side-by-side due to flex.

How can I get .wrapperLongInner to have the same height as its parent parent by default?

JSFiddle

.wrapperShortOuter {
  overflow: hidden;
  background-color: lightgreen;
}
.wrapperLongInner {
  display: flex;
  align-items: flex-start;
  background-color: lightblue;
}
.content {
  overflow: hidden;
  display: inline-block;
  width: 0;
}

<div id="fullWrapper" style="height: 166px; width: 536px;">
  <div class="wrapperShortOuter">
    <div class="wrapperLongInner" style="width: 1072px;">
      <div class="content" style="width: 536px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
      <div class="content">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</div>
      <div class="content">Tin voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
      <div class="content">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</div>
      <div class="content">doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem</div>
      <div class="content">quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
      <div class="content">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
    </div>
  </div>
</div>

解决方案

You will have to give height:100% in the .wrapperLongInner class like this :-

.wrapperLongInner {
    display: flex;
    align-items: flex-start;
    background-color: lightblue;
    height: 100%;
}

Note :- In internet explorer there is a chaining mechanism which they use if height:100% is given. So, you will have to give height:100% to all the divs in the chain till a parent div with fixed height ( not in percentage ) comes. If the chain breaks, no height will be applied to the div. For I.E. you need to do something like this along with the above code:-

.wrapperShortOuter {
    overflow: hidden;
    background-color: lightgreen;
    height: 100%;
}

You can refer the jsFiddle here.

这篇关于子div高度与父div不一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！