0

I have code like this:

<body>
<div class="parent">
<div class="children">
Some content here
</div>
</div>
</body>

And this CSS:

body {width:100%;height:100%}
.parent{background-color: grey;}
.children{width: 90%; text-align: justify;}

I want to make height of children equal to width of parent. Unfortunately - I do not know why. I tried to look in Internet, tried different solutions like children{width: 90%; text-align: justify;height: 100%;}, but they do not work. I know I can use table instead of this second div, but then this website won't be responsive on smaller devices, which is very importnat for me. Any suggestions?

TN888
  • 7,659
  • 9
  • 48
  • 84

2 Answers2

0

You can do this in CSS 3 with viewport units (each vw is 1% of the width of the viewport):

#parent {
    position: relative;
    background: #aaa;
    margin: 10px;
    width: 50%;
}

#child1 {
    height: 100px;
    background: #333;
    width: 100px;
    margin: 10px;
}
#child2 {

    height: 50vw;
    width: 100%;
    background: #f00;
}
}
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

The catch is you have to know what percentage of the viewport your parent is, although this shouldn't be too much of an issue if you're trying to make your design responsive.

Greg Rozmarynowycz
  • 2,037
  • 17
  • 20
0

In straight CSS there is no way to refer to another elements property values. In order to get the child to be the height of the width of the parent, you will need to use javascript.

When the page is done rendering, you will need to grab the width of the parent div using javascript and set the height of the child using that value.

Bikerdan
  • 124
  • 6
  • 1
    Most part of your answer is incorrect. – Salman A Feb 27 '15 at 18:20
  • @SalmanA: Please elaborate... – Bikerdan Feb 27 '15 at 18:23
  • Example: if the parent has a defined height then you can make the child same height by specifying `height: 100%` in straight CSS. – Salman A Feb 27 '15 at 18:27
  • @SalmanA: You haven't read the question properly. They are not trying to match the height. They are trying to match the height of the child to the width of the parent. – Bikerdan Feb 27 '15 at 18:28
  • I was referring to the first part of your question which sounds like a general statement. Also, a percentage padding (top/bottom/left/right) refers to parent's width. – Salman A Feb 27 '15 at 18:51