Set div height as percentage of window

HTML & CSS
1

Set div height as percentage of window

Hi all

I know this is simple but I just can’t work it out.

I have two div’s in a wrapping div. I want to set the two div’s height as a percentage of the window.

I have set the html/body’s height to 100% and the wrapping div to min-height:100%;

http://www.ttmt.org.uk/forum/css/

How can I set the top div to 80% of the height and the bottom to 30%


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">
    html, body{
      height:100%;
    }
    #wrap{
      min-height:100%;
    }
    #top{
      background:red;
      height:80%;
    }
    #bottom{
      background:#eee;
      height:30%;
    }
  </style>

  </head>

<body>

  <div id="wrap">

    <div id="top">
      <h1>top</h1>
    </div>

    <div id="bottom">
      <h1>bottom</h1>
    </div>

  </div><!-- #wrap -->

</body>

</html>
2

Hi,

You can’t base a percentage height on an element that has no specific height set or who’s height is controlled by its content. Min-height doesn’t count as height so the height of #wrap is effectively:auto. You would need to change the min-height:100% to height:100% for the above example to work. Of course #wrap is then redundant anyway and can be done without.


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
html, body { height:100%; }
#wrap { min-height:100%; }
#top {
	background:red;
	height:70%;
}
#bottom {
	background:#eee;
	height:30%;
}
</style>
</head>
<body>
<div id="top">
		<h1>top</h1>
</div>
<div id="bottom">
		<h1>bottom</h1>
</div>
</body>
</html>

80% + 30% = 110% which is too big for anything. I think you meant 80% + 20% :slight_smile:

Of course the above structure is totally useless unless you set overflow to auto so that scrollbars will appear on each element when content exceeds the height that you have set.

You can’t really build a layout with coloured divs. You need content and context before you can make decision about how the design can be coded. Whenever you set a fixed height on an element that holds fluid content then you are probably doing something wrong.

If you can elaborate on what you want to achieve we may be able to point you to a more suitable method :slight_smile:

3

Yes I meant 80%/20% - my brain is gone today.

What I’m trying to do is something like this.

http://www.ttmt.org.uk/forum/css/index1.html

I want a div that will stay at the bottom of the window - this will have content which will set it’s height and it will stay the same.

Above that I want an image that will scale when the window is resized.

In this example the content at the bottom is hidden and I need to scroll down to see it.

It’s really simple I know

4

Hi,

If the red div is a fixed height then you need the sticky footer approach (see css faq in my sig).

Making the image stretch is another problem altogether unless you are just interested in css3 methods and then you can use background-size.

5

Hi

This is the way I normally do sticky footers.

http://www.ttmt.org.uk/forum/css/sticky.html

Is there no simple CSS way to scale the images when resizing the window - could I look at something like jQuery for this?

6

That’s an old and broken method and wont work in IE7, 8 or opera and maybe a few others. Read the css faq link I gave you for why.

If you don’t mind simply stretching the image you can do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
#outer {
	width:760px;
	background:#ffffcc;
	margin:auto;
	min-height:100%;
	margin-top:-80px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
}
* html #outer { height:100% }/* ie6*/
.content {
	border-top:80px solid #fff; /* soak up negative margin and allows header to start at top of page*/
	width:100%;
	position:relative;
	z-index:2;
}
#footer {/* footer now sits at bottom of window*/
	background:red;
	width:760px;
	margin:auto;
	height:80px;/* must match negative margin of #outer */
	clear:both;
}
/*Opera Fix*/
body:before {
	content:" ";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
h1, h2, p { padding:0 10px; }
#outer:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
.imgstretch {
	position:absolute;
	left:0;
	top:80px;
	width:100%;
	bottom:0;
	clear:both;/* ie bug*/
}
* html .imgstretch{top:0;height:100%;bottom:auto}
*+html .imgstretch{top:0;height:100%;bottom:auto}
.imgstretch img{
	width:100%;
	height:100%;
	-ms-interpolation-mode:bicubic;
	image-rendering: optimizeQuality;
}
</style>
</head>
<body>
<div id="outer"> 
		<div class="content"></div>
  <div class="imgstretch"><img  src="http://www.ttmt.org.uk/forum/css/1.jpg" alt="" /></div>
</div>
<div id="footer">
		<p>Footer</p>
</div>
</body>
</html>

If you want the image scaled with correct aspect and still fill height and width then you will need some js for that and there are a few script around.