Making div element fill remaining vertical space? (css)

floyde · Mar 27, 2006

Is it possible?
I have two divs. One has a fixed height and I want the other one to fill the remaining vertical space on the window. If I set the latter div's height to 100%, it'll make it the same height as the window, but I want it to be the height of the window minus the height of the first div.

This is the code I'm using:

Code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>Vertical div test</title> 
<style type="text/css" media="screen"> 

body { 
  margin:0; 
  padding:0; 
  height:100%; 

} 
#div1 {
  height: 100px;
  background-color: blue;
}
#div2 {
  height: 100%;
  background-color: green;
}
</style> 
</head> 

<body> 

<div id="div1"> 
  
</div> 
<div id="div2"> 
  
</div> 

</body> 
</html>

I also included some images that show what I want to do and what I've been able to do so far. Thanks in advance

NoNameBrand · Mar 27, 2006

Why not nest the 1st inside the 2nd?

Otherwise, I can't think of a way that you'll get what you want.

stevep · Mar 27, 2006

I think it might be that you're not telling the second layer where it has to start, so its assuming it starts from the top, therefore overlapping the first layer.
Try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>

<body>
<div id="Layer2">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>

</div>
<div id="Layer1"></div>
</body>
</html>
ps I cheated by doing it in DW, adding some content to the second layer, and then messing about with the code - DW likes things to have some padding round the edges and even though you can specify in the dialogs that you want a layer to start at 0px from the top corner, you have to tell it twice, using the Code View. I had to anyway.

floyde · Mar 27, 2006

NoNameBrand said:
Why not nest the 1st inside the 2nd?

Otherwise, I can't think of a way that you'll get what you want.

Thanks, that works visually, but the second div will be a container for this layout, so I still need it to have the proper dimensions so that its contents can inherit them.

So maybe it's simply not possible? Perhaps I'll need to use a little javascript to make it work?

stevep said:
Try:

Thanks, but I couldn't make it work, what browser did you use?

floyde · Mar 27, 2006

The grand scheme of things

Ok here's a pic of my ultimate goal. So far I've been doing it gradually, so maybe the problem is my initial approach. So how would you guys approach this (I just need ideas)? Would you use pure css, or would you give in to tables or frames?

stevep · Mar 27, 2006

I used Safari. Copy and paste the chunk of code into a text file - make sure it has the .html suffix when you save it. Then just drag the new file into an open browser window. Just tested it with Firefox and its ok - at least I think its what you want.
The bit you have to play around with is this:
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:180px;
z-index:1;
background-color: #99CCFF;
}
Rough your page out on a piece of paper so you get the positions right, and that'll give you the position of the top LH corner of each layer. The height of layer 1 will determine the start position of layer 2 - in this case layer 2 has to have a top:180px; line of code.
If you want the 3 layers as you show in your last post, then the left most layer will be:
#Layer1 {
position:absolute;
left:0px;
top:0px;
width:200px;
height:100%;
z-index:1;
background-color: #336699;
}
and the top RH layer will be:
#Layer1 {
position:absolute;
left:200px;
top:0px;
width:100%;
height:180px;
z-index:2;
background-color: #33CCFF;
}
and the 3rd layer to fill the remainder of the window (however it is resized) should be something like:
#Layer1 {
position:absolute;
left:200px;
top:180px;
width:100%;
height:100%;
z-index:3;
background-color: #99CCFF;
}
Its best to put some dummy content in each layer if you're using Dreamweaver, in case the layer shrinks to nothing in page view, hence the 'a,b,c etc' in the original html above.

ps I'm not an expert, I may be wrong but I hope it helps. What I can say is that my first bit of code does seem to work. I personally wouldn't nest layers if I could help bit, but that's just me - I only do simple.

NoNameBrand · Mar 27, 2006

What is this "layers" stuff? is that Dreamweaver-esque for 'break stuff real-good'?

Here is what I would do:

Code:

<html>
<head></head>
<body style="margin:0px; padding 0px;">
<div id="sidebar" style="float: left; border: 1px solid green; width: 20%">
        <div style="height: 900px; width: 20%;">foo</div>
</div>
<div id="top-bar" style="background: blue; width: 80%; margin-left: 20%;">
        <div id="top-bar-graphic" style="background: #eef; background-image: url('/images/foo.jpg'); width: 400px; height: 200px;">
        </div>
</div>
<div id="content" style="background: red; width: 80%; margin-left: 20%;">
        <div id="picture1" style="width:50%; height:50%; float: left; overflow:hidden;">                 <div style="background:black; width: 500px; height: 375px;">
                </div>
        </div>
        <div id="picture2" style="width:50%; height:50%; overflow:hidden;">
                <div style="background:purple; width: 500px; height: 375px;">
                </div>
        </div>
        <div id="picture3" style="width:50%; height:50%; float: left; overflow:hidden;">
                <div style="background:purple; width: 500px; height: 375px;">
                </div>
        </div>
        <div id="picture4" style="width:50%; height:50%; overflow:hidden;">
                <div style="background:black; width: 500px; height: 375px;">
                </div>
        </div>
</div>
</body>
</html>

This is pretty close, I think. Haven't tested it on IE, so who knows.

The coloured divs in the picture divs are your images...

crees! · Mar 27, 2006

Deconcept...

Check out FlashObject and in the download there is code to make a div fullscreen.. maybe it can be tailored how you want it.

http://blog.deconcept.com/flashobject/

floyde · Mar 28, 2006

Thanks for all the help guys, but I just realized that the exact layout that I want is impossible to achieve with a combination of fixed widths/heights and percentages. I rewrote it using only percentages and now it works

. If you are interested in the markup let me know and I'll post it.

stevep · Mar 28, 2006

floyde said:
If you are interested in the markup let me know and I'll post it.

I'd like to have a look if you've got the time to post again.

NoNameBrand said:
What is this "layers" stuff? is that Dreamweaver-esque for 'break stuff real-good'?

Well, I don't know about the 'breaking stuff' but I guess you sussed that I'm not a CSS boff - layers are a convenient name given by DW to things that I think should be called 'CSS positioned elements' - and I think they call them that to make people like me from a DTP / Photoshop background feel a bit more comfortable. Looking at the code you've included in your post NoNameBrand its a lot more elegant than mine - I'll have to have a stab at really getting my head round the div tag. Thanks for the OP and the replies.

NoNameBrand · Mar 28, 2006

stevep said:
Well, I don't know about the 'breaking stuff' but I guess you sussed that I'm not a CSS boff - layers are a convenient name given by DW to things that I think should be called 'CSS positioned elements'

They also had stacking z-indexes on them - which position things front-to-back on a page. I've seen DW layers before that totally broke a site, but otherwise haven't had much exposure to them (that was enough, really).

I'll have to have a stab at really getting my head round the div tag.

A <div> is just an arbitrary block - it doesn't mean anything semantically, the way a <p> does (a paragraph of text). A <span> is the same idea, but for inline things (like a <strong> tag, but again, semantic free).

The easiest thing to do to learn this stuff is to stop using Dreamweaver. I design my sites in Photoshop and then save the graphical elements that I want, along with jotting down colour codes and some rough pixel measurements for alignment purposes, and then I code the site in TextWrangler or VIM.

floyde · Mar 28, 2006

stevep said:
I'd like to have a look if you've got the time to post again.

Here it is, there's a bit of spanish in there, I hope it's not too confusing:

Code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>Grand Scheme</title> 

<style type="text/css" media="screen"> 
html {
	height: 100%;
}
body { 
  	margin: 0;
  	padding: 0;
  	height: 100%;
  	width: 100%;
}
#left, #right {
	float: left;
}
#left {
  	height:100%;
  	background-color: orange;
  	width: 10%;
}
#right {
  	height: 100%;
	position:relative;
	width: 90%;
}
#top {
  	background-color: blue;
  	height: 10%;
}
#fotos {
  	position: relative;
  	height: 90%;
}
#foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der {
	height: 50%;
	width: 50%;
	overflow: auto;
	position: absolute;
}
#foto_sup_izq, #foto_sup_der {
	top: 0;
}
#foto_sup_der, #foto_inf_der {
	left: 50%;
}
#foto_inf_izq, #foto_inf_der {
	top: 50%;
}
</style>

</head> 

<body> 

<div id="left"> </div>

<div id="right">

	<div id="top"> </div>
	
	<div id="fotos">
		
		<div id="foto_sup_izq">
			<img id="imagen1" src="test.jpg" alt="Script1" />
		</div>
		
		<div id="foto_sup_der">
			<img id="imagen2" src="test.jpg" alt="Script2" />
		</div>
		
		<div id="foto_inf_izq">
			<img id="imagen3" src="test.jpg" alt="Script3" />
		</div>
		
		<div id="foto_inf_der">
			<img id="imagen4" src="test.jpg" alt="Script4" />
		</div>
		
	</div>
	
</div>

</body> 
</html>

For best results, download the picture and save it as test.jpg

Search

Search

Making div element fill remaining vertical space? (css)

floyde

macrumors 6502a

Attachments

NoNameBrand

macrumors 6502

stevep

macrumors 6502a

floyde

macrumors 6502a

floyde

macrumors 6502a

Attachments

stevep

macrumors 6502a

NoNameBrand

macrumors 6502

crees!

macrumors 68020

floyde

macrumors 6502a

stevep

macrumors 6502a

NoNameBrand

macrumors 6502

floyde

macrumors 6502a

Attachments

Our Staff