CODEWITHSUNDEEP
htmlcss
dale
dale

Reputation: 1258

How to set the height of divs in basic layout

I'm trying to set the size of 2 divs to fill the page with a 70 - 30 % ratio.

Without setting the size of the "html ,body" how can i get the divs to display to the correct height.

Currently it displays two single lines the height of the text. Thanks

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>

<body>
<div style="overflow: hidden; clear: both;">
    <div style="background-color: blue; height: 70%;">Top</div>
    <div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>

</html>

Upvotes: 3

Views: 303

Answers (4)

user1793716
user1793716

Reputation:

You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

Here's the fiddle

Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:

...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

Upvotes: 0

Mister Epic
Mister Epic

Reputation: 16733

You cannot do this with CSS, for a good reason. If you don't set a height to the body, it's height will become as high as it needs to be to accommodate all of its children. Now, if you use percentage-based units for your children's height, the children's height will be calculated based on the height of its parent.

So, the parent's height would depend on the height of its children, and its children's height would depend on the height of the parent - infinte loop!

P.S. Fred's method works, in case your concern about setting the height revolved around setting a static height. Setting the height to 100% might solve your dilemma.

Upvotes: 2

fred02138
fred02138

Reputation: 3361

You need to make the body and html elements have height:100%, and you need to give the outer div height: 100%.

CSS:

body, html { height: 100%} 

<div style="overflow: hidden; clear: both; height: 100%">
    <div style="background-color: blue; height: 70%;">Top</div>
    ...

Upvotes: 2

scubaFun
scubaFun

Reputation: 1289

Unfortunately, you need to assign a fixed height to the DIVs parent in order for the 70% - 30% ratio to work.

One thing you can do is use JavaScript to get the height of the window, and then assign this value to the parent DIV. In this way, the percents will work, since it have a reference of how it should re-size.

Upvotes: 0

Related Questions