fieldset不遵循其父母的身高

我一直在试图解决这个问题一段时间，找不到解决方案。fieldset不遵循其父母的身高

这里是我的代码

CSS

.parent{ 
    width:100px; 
    display:table; 
    border:1px solid green; 
} 

.child{ 
    width:50px; 
    background:blue; 
    display:table-cell; 
    height: inherit; 
} 

.child + .child{ 
    background:red; 
}

HTML

<body> 
    <div class="parent"> 
     <div class="child">a <br/> b<br/> b<br/> b<br/> b<br/> b<br/> b</div> 
     <div class="child" style="border: 2px dashed black"> 
      <fieldset style="height:100%;">a</fieldset> 
     </div> 
    </div> 
</body>

我想fieldset在第二个孩子div取父div的高度。所以，fieldset的高度应该等于它的div的height。

我该怎么做？

来源

2012-02-02 IamaC

当父母的身高被声明时，身高百分比起作用。在你的情况，height: inherit;，但它继承没有从它的父母称为.parent。在.parent上设置height修复它。（或者，您也可以设置所谓的.child比inherit其他一些孩子的height。）

http://jsfiddle.net/HtAJw/

HTML：

<div class="parent"> 
    <div class="child">a <br/> b<br/> b<br/> b<br/> b<br/> b<br/> b</div> 
    <div class="child" style="border: 2px dashed black"> 
     <fieldset style="height:100%;">a</fieldset> 
    </div> 
</div>

CSS：

.parent{ 
    width:100px; 
    display:table; 
    border:1px solid green; 
    height: 100% /* <-- added height to parent */ 
} 

.child{ 
    width:50px; 
    background:blue; 
    display:table-cell; 
    height: inherit; 
} 

.child + .child{ 
    background:red; 
}

来源

2012-02-02 17:32:40 Sparky

非常感谢您的解决方案..这对我的问题之一。但是我遇到了另一个问题。第一个孩子有其他Div，当页面加载第二个孩子时，fieldset从父div的底部开始。我不明白为什么它这样做？任何解决方案 – IamaC 2012-02-02 20:35:17

@lamaC，我不太理解你的后续问题。最好问一个新问题，然后加入一个展示新问题的jsFiddle。通常，当你使用高度作为百分比时，你必须意识到链上每个父母的指定高度。 – Sparky 2012-02-02 21:48:25

感谢您的建议。这里是我的新问题的链接http://stackoverflow.com/questions/9121034/table-cell-in-div-is-not-working – IamaC 2012-02-02 22:35:46

如果你想在表单该节始终占据其父div的整个区域，然后使它

.child2 { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

（固定值如适用）。

来源

2012-02-02 17:23:28

澄清。应将child2分配给该字段集。 – 2012-02-02 17:24:11

'位置：相对;'应该被添加到.child中，或者字段集将填充整个页面 – Laxman13 2012-02-02 17:29:00

感谢您的更正，我在测试页中设置了它，但错过了这里。 – 2012-02-02 17:32:00

fieldset不遵循其父母的身高

回答

相关问题