CODEWITHSUNDEEP
htmlcsscss-float
sachinkondana
sachinkondana

Reputation: 681

How to make all horizontal child div's to fit to the parent?

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?

Upvotes: 1

Views: 534

Answers (6)

damian
damian

Reputation: 5444

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

Upvotes: 3

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

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

Upvotes: 1

Viji Nainar
Viji Nainar

Reputation: 11

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

Upvotes: 1

Kos
Kos

Reputation: 72281

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)

Upvotes: 3

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 1

Nightfirecat
Nightfirecat

Reputation: 11610

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

Upvotes: 1

Related Questions