1

Here is my HTML snippet,

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

If I have a CSS like:

.bigger
{
  height: 300px;
}

Is there any way in CSS to make all child div's to have height same as of parent i.e all should have 300px height?

6
  • Please look at your question, then use the "edit" link and use the formatting tools provided. Edit: Kos already helped you out. Oct 28, 2013 at 11:07
  • if you parent height is fixed , then you can always calculate no of child divs and animate accordingly Oct 28, 2013 at 11:07
  • I can't help but notice that you have heigh: 300px; rather than height: 300px; (with the t). Did you copy-and-paste that, or is it just a typo in the question? Oct 28, 2013 at 11:08
  • type error? Is there any css solution for the same? Oct 28, 2013 at 11:10
  • @Manglore What is your actual question? Oct 28, 2013 at 11:12

6 Answers 6

3

A solution using Flexbox:

.bigger {
  height: 400px;
  background: #eea;

  display: flex;
  flex-direction: column;
}

.bigger div {
  margin: 4px;
  border: 1px dotted green;
  flex: auto;   
}

Demo: http://codepen.io/anon/pen/nAjLt (Note that Codepen does vendor prefixing)

2
  • +1 for a simple solution using flex though, as a note, this will not work in older browsers. Oct 28, 2013 at 11:20
  • True, Flexbox is still experimental and I don't use it in production. See caniuse.com/flexbox for an up-to-date compatibility table.
    – Kos
    Oct 28, 2013 at 11:21
3

If you want to realize this in purely CSS you could try this

DEMO

I've set it up for 4 items. You could extend it to as many items you want.

/* one item */
.bigger > div:first-child:nth-last-child(1) {
    height: 300px;
}

/* two items */
.bigger > div:first-child:nth-last-child(2),
.bigger > div:first-child:nth-last-child(2) ~ div {
    height: 150px;
}

/* three items */
.bigger > div:first-child:nth-last-child(3),
.bigger > div:first-child:nth-last-child(3) ~ div {
    height: 100px;
}

/* four items */
.bigger > div:first-child:nth-last-child(4),
.bigger > div:first-child:nth-last-child(4) ~ div {
    height: 75px;
}
1

Allowing elements to take up equal amounts of space is something that's traditionally only been possible with the use of <table>s. You can, however, use CSS to make your <div>s behave like <table>s instead:

HTML

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <!-- add or remove any number of <div>s here -->
</div>

(relevant) CSS

.bigger {
    display: table;
    height: 300px;
    width: 100%;
}

.bigger > div {
    display: table-row;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
4
  • What if <div>A</div> Contents exceeds the 300px? I meant through this is it possible to add overflow: hidden for the child div's. I have tried but didnt worked for me Nov 6, 2013 at 11:44
  • Since it would be acting exactly like a <table>, you can't prevent it from resizing, unfortunately. If need be, you can wrap that within another <div> which prevents overflow, though. Nov 6, 2013 at 15:33
  • I mean, if there is 4 div's inside bigger and contents can be of any number of lines, all should share equal height? Nov 7, 2013 at 9:32
  • @Manglore Because .bigger displays like a table, all of its children will (attempt to) be equal height. If you exceed its height, you can make sure to wrap it in another <div> that hides any overflow that might happen. Nov 7, 2013 at 21:34
1

To work with child and parents, you need to use auto and max

<div class="bigger">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

Here you can use

.bigger {
  height: auto; // this will do the trick..
  overflow: none;
  min-height: 300px;
}

Use max and min, only to make sure the height remains same each time the child increases or descreases, then use this:

.bigger div {
  height: 100%; // note this..
}

Try out this fiddle here: http://jsfiddle.net/afzaal_ahmad_zeeshan/2bJfW/ Add a div more to it and check the thing,

If you want to create the div height dynamically, then there is no CSS, you will require JS or lets say jQuery for that. Because you will need to count the number of child and then change the percentage of their height, lets say from 100 to 30 (for 3) or 22 for (4) and so on, because the text won't get fit in that size.

1
.bigger
{
  height: auto;
}
.bigger div
{ 
height:50px;
}

You should mentioned height of each inner div,then only it works properly.

Now u add another inner div elements inside of bigger div the height should be same.

Here I have mentioned height 50px, u give at what height you wants.

1
.bigger {
    width:100%;
    height:auto;
    border:1px solid red;
}
.bigger div {
    height:100px;
    width:100%;
    border:1px solid blue;
}

Use this css, for your purpose, By setting height to auto it will adjust to any no of divs.

Also .bigger div will set all the div to 100px height.

Live Demo

EDIT : For Fixed Container

.bigger {
    width:100%;
    height:300px;
    border:1px solid red;
    display:table;
}
.bigger div {
    display:table-row;
    height:auto;
    width:100%;
}

Live Demo2

Also it will be same for all the browsers :)

2
  • 1
    The OP wanted a fixed height on the container, not elements.
    – Kos
    Oct 28, 2013 at 11:17
  • If on of the child div height exceeds 300px then this fails. How add oveflow : hidden properties to child? Nov 6, 2013 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.