0

Hello everyone,
I am currently wondering if I am backing myself into a corner. I am currently building a layout that has a center column that spans 100% of the height of the viewable browser window; on top of that I have put in a div with absolute positioning as a top menu bar that is exactly 25px in height. This part works. Now it gets tricky and is starting to make my brain hurt;

The top bar is a transparent .png because of how it is sitting you can see the top 25px of the column underneath it(this would be fine except it clashes with the background image). Now the simple solution would just be to make that top menu bar a solid color and be done with it - but I'm way to stubborn to give in that easy. So I am wondering if it is possible to position the column down 25px so the two don't clash but still keep the column expanding all the way to the bottom of the page?

Here is the css - the #site is the column and the #topbar is obviously the top menu bar:

#topbar {
	height:25px;
	width:100%;
	margin:0px; 
	padding:0px; 
	border-bottom: #000000 1px solid;
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(../images/topbg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:top;
}

#site {
	height:100%;
	min-height:100%;
	width:70%;
	margin:0px; 
	padding:0px; 
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-image:url(../images/sitebg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:fixed;
	float:left;
}

Please let me know if you need the actual page code. Thank you.

4
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by PixelatedKarma
0

Try something like this:

<html>
<head>
<title>Height &amp; Alignment Conundrum</title>
<style type="text/css">
<!--
#wrapper {
	width: 100%;
	height: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#topbar {
	height:25px;
	width:100%;
	border-bottom: #000000 1px solid;
	background-image:url(../images/topbg.png);
	background-repeat: repeat;
	background-position:top;
}
#site {	
	height: 100%;
	width:70%;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-image:url(../images/sitebg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:fixed;
	float:left;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="topbar"></div>
  <div id="site" class="clearfloat"></div>
</div>
</body>
</html>
0

You can't span 100% of the viewport height. This is not provided.

There are too many variations in the following features to ever make anything able to fit the vertical size of the viewport:

- Graphics mode
- Screen Resolution
- Screen Aspect Ratio
- Which Browser Used
- Browser Viewport Aspect Ratio
- Restored-Down Browser Window (affects resolution and aspect ratio of viewport)
- Extra Toolbars Installed on Browsers (affects aspect ratio of viewport)
- Preserving Aspect Ratios of Page Elements

With all of these variables, they chose to make width have priority, and sacrifice the ability to specify heights to match the viewport.

0

Ya but I do have 100% height on the site now - and its working great (in both IE and firefox). As content is added or removed it will expand the window so it becomes scrollable but case and point a single three line article the template fills the whole viewport regardless of browser size; and it still looks great.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.