根据他们的父母div高度平等地传播div

我想知道是否有办法动态设置div的高度作为他们父母div高度的函数。根据他们的父母div高度平等地传播div

例如，如果父div的用户输入是100px，并且内部有4个div，则每个div将获得25px的高度。

我想动态地做这件事，并确保divs遍布其父母的div高度（我试着用JS做这件事，但因为没有这样的事情'像素的一小部分' - div高度在某些情况下不会对应父母的高度）

2014-12-28 Ira

什么浏览器兼容性是你打炮？如果你不太关心，我会建议使用CSS flexbox。使用基于JS的方法，您可以免于听到窗口大小调整和DOM插入事件（如果发生的话）的麻烦。 – Terry

这是你所期待的吗？

.parent { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #ff0000; 
 
    float: left; 
 
    display: block; 
 
    border: solid 1px #ff0000; 
 
} 
 
.parent .child { 
 
    height: 50%; 
 
    width: 50%; 
 
    background: #00ff00; 
 
    float: left; 
 
    display: block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

下面是该 snippet的的jsfiddle。

来源

2014-12-28 13:40:39

命题1号

有一种方法，这里的jsFiddle和方法如下：

HTML：

<div class="parent"> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
    <div class="fourth"></div> 
</div>

和CSS：

.parent { 
    width:100px; 
    height:100px; 
} 

.fourth { 
    width:100%; 
    height: auto; 
    padding-bottom: 25%; 
    background: red; 
}

然而，这是有限的，因为你没有l onger可以在这些元素中使用填充（如果您希望这样做）加上div的高度必须等于其宽度，因为儿童的高度是根据宽度计算的。

命题2号

使用tables。这里的jsFiddle

HTML：

<table class="parent"> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
    <tr class="fourth"> 
     <td></td> 
    </tr> 
</table>

和CSS：

.parent { 
    width:100px; 
    height:200px; 
    background: #aaa; 
} 

.fourth { 
    background: red; 
}

在这种情况下，你的内容将是自动，整个父DIV的整个高度均匀分布。

除此之外，JS soltion是你可以使用的，但你需要监视你自己的变化，如果它们被做出并且调用某种更新方法。

来源

2014-12-28 13:41:25 bwitkowicz

这是一个如何，你可以使用jQuery

JSFiddle

var parent_height = $('.parent').height(); 
$('.parent div').height(parent_height/4); 

$('#parent-div-height').keyup(function(event) { 
    value = $(this).val(); 

    $('.parent div').height(value/4); 
});

来源

2014-12-28 13:55:49

好的，但如果父级大小为103px会发生什么？ 3个额外的px在哪里？ – Ira

如果你看看开发工具，你会看到每个孩子得到25.75 px，当父高度为103px时，浏览器非常擅长处理浮动，所以这是你不应该担心的，只是你的师浏览器引擎会照顾它 –

解决这个问题的一个例子，你可以使用table布局display:table和display:table-row为children

.parent { 
 
    display:table; 
 
    height:100px; 
 
    border-collapse: collapse; 
 
    margin:20px; 
 
} 
 
.parent .child { 
 
    display: table-row; 
 
    border:1px solid green; 
 
}

<div class="parent"> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
    <div class="child">test</div> 
 
</div>

来源

2014-12-28 14:06:38

可以在JavaScript中完成并且是动态的。 http://jsfiddle.net/xfx2r741/1/

function setHeightSubs() { 

    var giveHeight = document.getElementById('main').offsetHeight; 
    var subs = document.getElementsByClassName('sub'); 
    var subsheight = giveHeight/subs.length; 

    for (i=0; i<subs.length; i++) { 
      subs[i].style.height = subsheight + "px"; 
    } 

} 

setHeightSubs();

来源

2014-12-28 14:07:12 Michelangelo

根据他们的父母div高度平等地传播div

回答

相关问题