CODEWITHSUNDEEP
htmlcss
Oliver Murfett
Oliver Murfett

Reputation: 97

How to set a relative height of a div with no height

I need help setting 'div1' to 50% of its parent element: 'div2'. The height of 'div2' is decided by an image inside it. How can I set 'div1' to 50% 'div2'

Example: http://jsfiddle.net/k39048eh/

For 'div1' I have tried: height: 50%, min-height: 50%; For 'div2' I have tried: height: auto

Upvotes: 0

Views: 1678

Answers (5)

Vidur
Vidur

Reputation: 1552

The height of an element can have 5 possible properties 1:

  1. auto - The calculated height for this element by the browser.
  2. length - An explicit length like 200px, 2em, or even 0
  3. percent - As a percent of its containing block element
  4. inherit - From its parent
  5. initial - the default value - auto here

The reason your CSS isn't working is because when you tell .div1 to have a percent-based height, it tries to calculate that value based on a value set for its parent. And since .div2 has a height of auto (by default), and not a specific length based height, .div1 also defaults to a height of auto.

You have a couple options in this scenario:

Option 1

Give .div2 a fixed height in pixels or ems. For example, if you set height: 200px;

Fiddle: http://jsfiddle.net/vyder/k39048eh/3/

Option 2

Give .div2 a percent height based on its parents (which are html, and body in my example here).

Fiddle: http://jsfiddle.net/vyder/k39048eh/2

Option 3

However, that's not an ideal solution since you're trying to match .div2's height to fit the image child element's height.

Perhaps, you can set a fixed height for .div2, and resize the image to have the same height to give the same effect like this.

Fiddle: http://jsfiddle.net/vyder/k39048eh/5/

Option 4

Finally, when you set an element's position to be absolute, the browser follows different rules when drawing it out.

So here I've set .div1's position to be absolute, and .div2's to relative, so that .div1's dimensions and position are calculated relative to .div2's.

Fiddle: http://jsfiddle.net/vyder/k39048eh/8/

The problem you face here though is that if .div1's content increases, and its height exceeds that of its parent, .div2 won't automatically increases its height to fit .div1.

Let me know if you have questions.

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

.div2 {
    border: 3px solid blue;
    width: 40%;
    float: right;  
    position: absolute;
    right: 0;
    top: 0;
    bottom:50%;
}
.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

HTML:

<div class="parent">
    <div class="div1">
        <img src="http://lorempixel.com/400/200" class="image" />
        <div class="div2">Needs to be 50% height of DIV1</div>
    </div>
</div>

Upvotes: 2

Ilanus
Ilanus

Reputation: 6928

You can do it using CSS calc function:

See: jsfiddle.net/k39048eh/4/

The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition/animation times or sound frequencies. However, it allows you to mix measurement types — a powerful concept in CSS.

Upvotes: -1

Darren Willows
Darren Willows

Reputation: 2131

You could use JQuery but here is my pure CSS way using the table method.

HTML

<div class="container">
    <div class="column"><img src="http://lorempixel.com/400/200" class="image"/></div>
    <div class="column">
        <div class="row right-side">Upper half</div>

    </div>
</div>

CSS

body {
    margin 0;
    padding 0;
}
.container {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 3px solid red;
}
img {
    width: 100%;
    padding 0;
    margin 0;
    border: none;
}
.column {
    width: 50%;
    padding: 0;
    margin: 0;
    display: table-cell;
    vertical-align: top;
    border: 3px solid green;
}
.row {
    width: 100%;
    height: 50%;
    padding: 0;
    margin: 0;
    vertical-align: top;    
    display:table;
}
.right-side {
    height:50%;
    display:inline-table;
    border: 3px solid blue;
}

http://jsfiddle.net/7y9eK/26/

Upvotes: 2

Amila Iddamalgoda
Amila Iddamalgoda

Reputation: 4286

Use jquery for this

<script type="text/javascript">
  $(document).ready(function() {
        var div1=$( '.div1' ).height();
        $('.div2').height(div1/2);
  });
</script>

Upvotes: 1

Related Questions