CSS – 展开浮动子DIV高度父母的高度

我有页面结构为:

<div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> 

现在, child-left DIV会有更多的内容,所以parent DIV的高度会随着孩子DIV的增加而增加。

但是问题是child-right身高并没有增加。 我怎样才能使自己的身高与父母相等呢?

12 Solutions collect form web for “CSS – 展开浮动子DIV高度父母的高度”

为父元素添加以下属性

 .parent { overflow: hidden; position: relative; width: 100%; } 

那么对于.child-right这些:

 .child-right { background:green; height: 100%; width: 50%; position: absolute; right: 0; top: 0; } 

你可以在这里find更详细的CSS例子: http : //jsbin.com/nimeguxuda/1/edit?html ,css, output

你可以在http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksfind更多有关等高柱的信息&#x3002;

这个问题的一个常见的解决scheme是使用绝对定位或裁剪的浮动,但是这些都很棘手,因为如果你的列的数量和大小发生变化,你需要确保你的“主”列总是最长的。 相反,我build议你使用三个更强大的解决scheme之一:

  1. display: flex :迄今为止最简单和最好的解决scheme ,非常灵活 – 但不支持IE9及以上。
  2. tabledisplay: table :非常简单,非常兼容(几乎每一个浏览器),非常灵活。
  3. display: inline-block; width:50% display: inline-block; width:50% ,利润率为负数:非常简单,但是列底边框有点棘手。

1. display:flex

这非常简单,并且可以很容易地适应更复杂或更详细的布局 – 但是Flexbox仅受IE10或更高版本(除了其他现代浏览器)的支持。

例如: http : //output.jsbin.com/hetunujuma/1

相关html:

 <div class="parent"><div>column 1</div><div>column 2</div></div> 

相关的CSS:

 .parent { display: -ms-flex; display: -webkit-flex; display: flex; } .parent>div { flex:1; } 

Flexbox支持更多的选项,但只要有任何数量的列就足够了!

2. <table>display: table

一个简单且极其兼容的方法是使用table我build议您先尝试一下,如果您需要旧的IE支持 。 你正在处理专栏。 divs + float并不是最好的方法(更不用提多个级别的嵌套div来绕开css限制,而不是简单地使用一个简单的表)。 如果您不希望使用table元素,请考虑使用css display: table (不支持IE7及更高版本)。

例如: http : //jsfiddle.net/emn13/7FFp3/

相关的html 🙁但是可以考虑使用一个普通的<table>

 <div class="parent"><div>column 1</div><div>column 2</div></div> 

相关的CSS:

 .parent { display: table; } .parent > div {display: table-cell; width:50%; } /*omit width:50% for auto-scaled column widths*/ 

这种方法比使用overflow:hidden更加健壮overflow:hidden着浮动。 您可以添加几乎任何数量的列; 你可以让它们自动缩放,如果你想要的话; 并保持与古代浏览器的兼容性。 不像浮动解决scheme需要,你也不需要事先知道哪一列是最长的; 高度很好。

KISS:不要使用浮动黑客,除非你特别需要。 如果IE7是一个问题,那么我仍然会select一个带有语义列的普通表格,而不是在任何一天都难以维护,灵活性较小的trick-CSS解决scheme。

顺便说一句,如果你需要你的布局是响应式的(例如,在小型手机上没有列),你可以使用@media查询返回@media布局的小屏幕宽度 – 无论使用<table>还是任何其他display: table元素。

3. display:inline block带有负边距的display:inline block

另一种select是使用display:inline block

例如: http //jsbin.com/ovuqes/2/edit

相关html:div标签之间没有空格是非常重要的!)

 <div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div> 

相关的CSS:

 .parent { position: relative; width: 100%; white-space: nowrap; overflow: hidden; } .parent>div { display:inline-block; width:50%; white-space:normal; vertical-align:top; } .parent>div>div { padding-bottom: 32768px; margin-bottom: -32768px; } 

这有点棘手,负边界意味着列的“真实”底部被遮蔽。 这反过来意味着你不能定位任何相对于这些列的底部的东西,因为这被overflow: hidden 。 请注意,除了内联块之外,您还可以使用浮动块实现类似的效果。


TL; DR :如果您可以忽略IE9及更早版本,请使用flexbox ; 否则请尝试一个(css)表。 如果这两个选项都不适用于您,则会出现利润率下降的情况,但是这些可能会导致在开发过程中很容易遗漏的奇怪显示问题,并且您需要注意布局限制。

我find了很多答案,但对我来说可能是最好的解决scheme

 .parent { overflow: hidden; } .parent .floatLeft { # your other styles float: left; margin-bottom: -99999px; padding-bottom: 99999px; } 

您可以在这里查看其他解决schemehttp://css-tricks.com/fluid-width-equal-height-columns/

对于父母:

 display: flex; 

为儿童:

 align-items: stretch; 

你应该添加一些前缀,检查caniuse。

请设置父div以overflow: hidden
那么在孩子divs你可以设置一个很大的填充底部的金额。 例如
padding-bottom: 5000px
然后margin-bottom: -5000px
然后所有的小孩子都会成为父母的高度。
当然,这不会工作,如果你试图把内容放在父div(除了是其他的div)

 .parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; } 
 <div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div> 

父母是否有身高? 如果你这样设定父母的身高。

 div.parent { height: 300px }; 

然后你可以让孩子像这样伸展到全高。

 div.child-right { height: 100% }; 

编辑

这里是你如何使用JavaScript来做到这一点。

我最近使用jQuery在我的网站上做了这个。 该代码计算最高的div的高度,并将其他div设置为相同的高度。 这是技术:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

我不相信height:100%会工作,所以如果你不明确知道div高度,我不认为有一个纯粹的CSS解决scheme。

我用这个评论部分:

 .parent { display: flex; float: left; border-top:2px solid black; width:635px; margin:10px 0px 0px 0px; padding:0px 20px 0px 20px; background-color: rgba(255,255,255,0.5); } .child-left { align-items: stretch; float: left; width:135px; padding:10px 10px 10px 0px; height:inherit; border-right:2px solid black; } .child-right { align-items: stretch; float: left; width:468px; padding:10px; } 
 <div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div> 

CSS表格显示是非常理想的:

 .parent { display: table; width: 100%; } .parent > div { display: table-cell; } .child-left { background: powderblue; } .child-right { background: papayawhip; } 
 <div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div> 

如果你意识到bootstrap,你可以通过使用'flex'属性来轻松完成。所有你需要做的就是把下面的CSS属性传递给父div

 .homepageSection { overflow: hidden; height: auto; display: flex; flex-flow: row; } 

其中.homepageSection是我的父div。 现在在你的html中添加子div

 <div class="abc col-md-6"> <div class="abc col-md-6"> 

其中ABC是我的孩子div.You可以检查高度平等的两个孩子div无论边界只是通过给边界的孩子div

 <div class="parent" style="height:500px;"> <div class="child-left floatLeft" style="height:100%"> </div> <div class="child-right floatLeft" style="height:100%"> </div> </div> 

我使用内联样式来给出想法。

我在实习面试中了解到这个巧妙的诀窍。 原来的问题是,如何确保三列中每个顶部组件的高度具有相同的高度,以显示所有可用的内容。 基本上创build一个不可见的子组件,它呈现最大可能的高度。

 <div class="parent"> <div class="assert-height invisible"> <!-- content --> </div> <div class="shown"> <!-- content --> </div> </div> 
  • 隐藏iframe上的水平滚动条?
  • AngularJS - 在使用ng模型时,input文本框的Value属性会被忽略?
  • 内联样式的CSS伪类
  • 如何使我的导航栏中的列表项的整个区域,可点击作为链接?
  • 正则expression式提取标签属性
  • 使用wkhtmltopdf从HTML生成Google Web字体和PDF
  • 什么是最简单的方法来删除<fieldset>边界线?
  • 从contentEditable div中提取文本
  • Angular2禁用button
  • 是否有相当于在HTML电子邮件中工作的CSS最大宽度?
  • xHTML / CSS:如何使内部div得到100%宽度减去另一个div宽度