首页 文章

CSS - 将float子DIV高度展开为父级的高度

提问于
浏览 次
380

我的页面结构如下：

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

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

现在， child-left DIV将有更多内容，因此 parent DIV的高度根据孩子DIV增加 .

但问题是 child-right 身高并没有增加 . 我怎样才能使它的高度等于它的父母？

html css layout

12 回答

  • 11

    如果您了解bootstrap，可以使用'flex'属性轻松完成 . 您需要做的是将下面的css属性传递给parent 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 . 你可以检查两个子div中的高度相等而不管边界只是给了孩子div的边界

    回复于
  • 397

    父母的身高吗？如果你这样设置父母身高 .

    div.parent { height: 300px };

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

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

    EDIT

    Here is how you would do it using JavaScript.

    回复于
  • 18

    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>

    原始答案（假设任何列可能更高）：

    你试图让父母的身高取决于孩子的身高和孩子的身高取决于父母的身高 . 不会计算 . CSS Faux色谱柱是最佳解决方案 . 这样做的方法不止一种 . 我宁愿不使用JavaScript .

    回复于
  • 4

    对于 parent 元素，添加以下属性：

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

    然后为 .child-right 这些：

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

    使用CSS示例here查找更详细的结果以及有关相等高度列here的更多信息 .

    回复于
  • -3

    这个问题的一个常见解决方案是使用绝对定位或裁剪浮动，但这些都很棘手，因为如果您的列的数量大小发生变化，它们需要进行大量调整，并且您需要确保“主”列总是最长 . 相反，我建议你使用三种更强大的解决方案之一：

    • display: flex ：到目前为止 the simplest & best solution 并且非常灵活 - 但IE9和更早版本都不支持 .

    • table 或 display: table ：非常简单，非常兼容（几乎每个浏览器都有），非常灵活 .

    • display: inline-block; width:50% 带有负边距黑客：非常简单，但是柱底边框有点棘手 .

    1. display：flex

    这非常简单，并且很容易适应更复杂或更详细的布局 - 但是只有IE10或更高版本（除了其他现代浏览器之外）才支持flexbox .

    Example: http://output.jsbin.com/hetunujuma/1

    Relevant html:

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

    Relevant css:

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

    Flexbox支持更多选项，但只需拥有任意数量的列就足够了！

    2. <table>或display：table

    一个简单且极其兼容的方法是使用 table - I'd recommend you try that first if you need old-IE support . 你最好的方法就是这样做（更不用说多个级别的嵌套div只是为了克服css限制而不仅仅是使用一个简单的表）."semantic" . 如果您不想使用 table 元素， consider css display: table （IE7及更早版本不支持） .

    Example: http://jsfiddle.net/emn13/7FFp3/

    Relevant html: （但考虑使用普通的 <table> 代替）

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

    Relevant css:

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

    这种方法比使用带有浮点数的 overflow:hidden 要强大得多 . 你可以添加几乎任意数量的列;如果你愿意，你可以让它们自动缩放;并保持与古代浏览器的兼容性 . 与浮点解决方案要求不同，您也不需要事先知道哪个列最长;身高很好 .

    KISS: don 't use float hacks unless you specifically need to. If IE7 is an issue, I' d仍然选择一个带有语义列的普通表，而不是任何一天难以维护，灵活性较低的技巧CSS解决方案 .

    顺便说一句，如果你需要你的布局响应（例如小手机上没有列）你可以使用 @media 查询回退到小屏幕宽度的普通块布局 - 无论你使用 <table> 还是任何其他 display: table 元素，这都有效 .

    3.显示：带有负边距黑客的内联块 .

    另一种方法是使用 display:inline block .

    Example: http://jsbin.com/ovuqes/2/edit

    Relevant html: （ div 标签之间没有空格很重要！）

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

    Relevant 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; 
}

    这有点棘手，负边距意味着列的底部被遮挡了.294849_ . 这反过来意味着你可以通过 overflow: hidden 切断't position anything relative to the bottom of those columns because that' . 请注意，除了内联块之外，您还可以使用浮点数实现类似的效果 .

    TL;DR ：如果可以忽略IE9及更旧版本，请使用 flexbox ;否则尝试（css）表 . 如果这两个选项都不适合你，那么就存在负面的边缘黑客攻击，但是这些可能导致在开发过程中容易遗漏的奇怪显示问题，并且需要注意布局限制 .

    回复于
  • 4

    我找到了很多答案，但对我来说可能是最好的解决方案

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

    你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

    回复于
  • 167

    请将父div设置为 overflow: hidden
    然后在子div中你可以为padding-bottom设置很大的数量 . 例如
    padding-bottom: 5000px
    那么 margin-bottom: -5000px
    然后所有子div都将是父级的高度 .
    当然，如果你想要的话，这不会奏效将内容放在父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
    
        Three line text in child2
    
        Three line text in child2
    </div>
</div>

    示例：http://jsfiddle.net/Tareqdhk/DAFEC/

    回复于
  • 8

    我最近在我的网站上使用jQuery完成了这个 . 代码计算最高div的高度，并将其他div设置为相同的高度 . 这是技术：

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

    我不相信 height:100% 会起作用，所以如果你不认为有一个纯粹的CSS解决方案 .

    回复于
  • 17
    <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>

    我使用内联样式只是为了给出主意 .

    回复于
  • 3

    对于父母：

    display: flex;

    为孩子：

    align-items: stretch;

    你应该添加一些前缀，检查caniuse .

    回复于
  • 0

    我用这个评论部分：

    .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>

    你可以将孩子向右浮动，但在这种情况下，我精确地计算了每个div的宽度 .

    回复于
  • 5

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

    <div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>
    回复于

相关问题