Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - 2 divs in a larger div must equal the same height... but how?

So here is a picture:

enter image description here

What the problem is that I have 2 divs in a container div. The container div expands in height as nessiscary and so do the 2 inner divs. The right div has a border-left... but if it is empty it will not fill the entire height.... how do I do this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The problem you're talking about is called "faux columns" and have been reported and described well over past few year :) http://www.alistapart.com/articles/fauxcolumns/

There are several solutions:

  • use background on the containing div which will imitate the border
  • use CSS3 techniques (display:table and display:table-cell, but these are not really meant for this or CSS3 flexbox which is highly experimental and probably won't work in most browsers)
  • use JS to set the column height to the maximum of heights of the elements

The last solution is quite good so if you're using jQuery then it could be achieved like that:

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

The script iterates through all children of the container and finds the highest element. Then it iterates again and sets the maximum height to each of them.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...