Howto set a minimum body height in CSS? 1

[RedLion]

Hi,

I decided to improve my web layout skills to Div-based layouts instead of the table based layouts I am used to. While I am a program (who doesn't like layouts, I like functionality) I decided it was time for me to put some energy in changing my layout skills to modern ways.

I found an example on the Internet that helped me very well

http://www.cssplay.co.uk/layouts/body4.html

but the only thing I can't get to work is that when people have a lower resolution let’s say 800x600, then it will be impossible for them to watch the website because the content div is to small. That’s why I would like to set a minimum height for the content div. In case of a resolution of 800x600 there should be a scroll bar that scrolls the whole page up and down.

And min-height: 700px; doesn't do the trick for me in IE...As I've read in the CSS documentation it isn't even supported within IE

Here is my code, almost the same as from this website

http://www.cssplay.co.uk/layouts/body4.html

but the problem is the same.

html
{
	height: 100%;
	_max-height: 100%;
	min-height: 1000px;
	padding: 0;
	margin: 0;
	border: 0; /* hide overflow:hidden from IE5/Mac */ /* \*/
	overflow: hidden; /* */
}

body
{
	width: 750px;
	margin: 0 auto;
	margin-top: 0px;
	background: url(site_pic/background.jpg);
	background-attachment: fixed;
	background-repeat: repeat;
	height: 100%;
	overflow: auto;
	_max-height:100%;
	min-height: 1000px;
}

#header
{
	display: block;
	position: absolute;
	width: 750px;
	height: 240px;
	background-color: #000000;
	background: url(site_pic/header.jpg) #000000;
	background-repeat: no-repeat;
	background-position: center center;
	width: 730;
}

#menu
{
	position:absolute;
	top:240px;
	width: 750px;
	height: 30px;
	background-color: #000000;
	padding-left: 0px;
	word-spacing: 25px;
	text-align: center;
	padding-top: 7px;
	
}

#content
{
	position: absolute; /* needed for footer positioning*/
	/*margin:0 auto; */ /* center, not in IE5 */
	_height:auto !important; /* real browsers */
	_height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	_display: block;
	_padding-bottom: 320px;
	width: 750px;
	background-color: #000000;
	margin: 0 auto;
	text-align: center;
	bottom:50px;
	top:270px;
	_z-index:3;
	overflow:auto;
}

#footer
{
	overflow: hidden;
	position: absolute;
	margin-top: 0px;
	width: 750px;
	height: 50px;
	background-color: #000000;
	bottom: 0;
	_z-index: 5;
	display: block;
}

#menu a
{
	font-family: sans-serif;
	font-weight: lighter;
	font-variant: normal;
	color: #FFFFFF;
	text-decoration: none;
}

#menu a:hover
{
	text-decoration: underline;
}

#contentarea
{
	width: 730px;
	background-color: #FFFFFF;
	height: 100%;
}

<div id="header">
<div id="headerpic"></div>
</div>
<div id="menu">
    <a href="javascript:selectMenu('home.html');">Home</a>
    <a href="javascript:selectMenu('agenda.html');">Agenda</a>
    <a href="javascript:selectMenu('nieuws.html');">Nieuws</a>
    <a href="javascript:selectMenu('band.html');">Band</a>
    <a href="javascript:selectMenu('historie.html');">Historie</a>
    <a href="javascript:selectMenu('home.html');">Media</a>
    <a href="">Gastenboek</a>
    <a href="javascript:selectMenu('contact.html');">Contact</a>
    <a href="javascript:selectMenu('link.html');">Link</a>
</div>
<div id="content">
    <iframe id="contentarea"home.html">
	</iframe>
</div>

<div id="footer">
</div>

 

[southbeach]

My guess would be that the best way to get this done is to use an image and set it in the background of your layer.

You could create a 1px Wide x 1000px High image and start with that.

Hope this helps!

--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

I tried this design in 800x600 in FF, IE7 and IE6 and it works good. Where are you experiencing lack of scrollbars?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[RedLion]

Thanks for your quick responses!

Southbeach, I tried to set a pic as the background image of my "content" div to a pic with a size of 1x900 by adding the css code

background: url(site_pic/shim900.gif);
background-repeat: no-repeat;

But there didn't appear any scrollbars on the right of the whole main window.


Vragabond, thanks for your time and effort to test and understand my question! As you can see, the example and my own page have a content area (div id="content) where all text and website information will be stored. In my own website the div id="content" will have an iframe where the pages are loaded within, it also has a scrollbar within the iframe that appears when the content within the iframe is bigger than the view of the iframe, all good so far.
BUT when the resolution is very small the content area will also be very small because of the big header, menu and footer of the page. Normally that is not a problem but with very small resolutions it will be impossible to read the content area anymore because it will only display (let's say) 2 lines of information. For those cases I would like to set a minimum height for the content div (what should result in the display of scrollbars on the whole window on the right side, like the tek-tips website).

I hope you can understand my problem know and would be able to help me with a solution?

Thanks in advance!

 

[Vragabond]

I understand but I think you will ultimately confuse your users that way. If they have a scrollbar on the right to scroll their content in view, then have a scrollbar in content to find the iframe and then scroll through iframe, that's too much scrolling. I would suggest to make an effort to only have one scrollbar for main content. Anything more is simply confusing for readers.

What is this small resolution when this problem would occur? Is it a resolution you're likely to expect from your users?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[RedLion]

Thanks for your response Vragabond!

You're probably right...
And when I look to the number of people still using the 800x600 resolution...so for get it.

BUT I was testing the site with IE7 instead of IE8 and now I saw that my iframe is not resizing to the height of content-div anymore?!?

So the question is, why does the hight:100% style not work anymore? (probably a IE bug) But what is the workaround?

Thanks in advance!

My latest code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js" type="text/javascript"></script>


</head>

<body>
<div id="header">
<div id="headerpic"></div>
</div>
<div id="menu">
    <a href="javascript:selectMenu('home.html');">Home</a>
    <a href="javascript:selectMenu('agenda.html');">Agenda</a>
    <a href="javascript:selectMenu('nieuws.html');">Nieuws</a>
    <a href="javascript:selectMenu('band.html');">Band</a>
    <a href="javascript:selectMenu('historie.html');">Historie</a>
    <a href="javascript:selectMenu('../fotoalbum.php');">Media</a>
    <a href="">Gastenboek</a>
    <a href="javascript:selectMenu('contact.html');">Contact</a>
    <a href="javascript:selectMenu('links.html');">Links</a>
</div>
<div id="content">
	<iframe id="contentarea" height="100%" src="">
	</iframe>
</div>

<div id="footer">
</div>

</body>
</html>

html
{
	height: 100%;
	_max-height: 100%;
	min-height: 100%;
	height:auto !important; /* real browsers */
	padding: 0;
	margin: 0;
	border: 0; /* hide overflow:hidden from IE5/Mac */ /* \*/
	overflow: hidden; /* */
}

body
{
	margin:0px;
	padding:0px;
	width: 750px;
	margin: 0 auto;
	margin-top: 0px;
	background: url(site_pic/background.jpg);
	background-attachment: fixed;
	background-repeat: repeat;
	height: 100%;
	overflow: auto;
	_max-height:100%;
	min-height: 100%;
	height:auto !important; /* real browsers */
	scrollbar-arrow-color: #969696;
	scrollbar-base-color: #000000;
	scrollbar-dark-shadow-color: #000000;
	scrollbar-3dlight-color:969696;
	scrollbar-face-color: #000000;
	scrollbar-highlight-color: #969696;
	scrollbar-shadow-color: #000000;
	scrollbar-darkshadow-color: #969696;
}

#header
{
	display: block;
	position: absolute;
	width: 750px;
	height: 200px;
	background-color: #000000;
	background: url(site_pic/header.jpg) #000000;
	background-repeat: no-repeat;
	background-position: center center;
	width: 730;
}

#menu
{
	position:absolute;
	top: 200px;
	width: 750px;
	height: 25px;
	background-color: #000000;
	padding-left: 0px;
	word-spacing: 25px;
	text-align: center;
	padding-top: 0px;	
}

#content
{
	position: absolute; /* needed for footer positioning*/
	/*margin:0 auto; */ /* center, not in IE5 */
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	_display: block;
	_padding-bottom: 320px;
	width: 750px;
	background-color: #000000;
	margin: 0 auto;
	text-align: center;
	bottom:30px;
	top:225px;
	_z-index:3;
	overflow:auto;
}

#footer
{
	overflow: hidden;
	position: absolute;
	margin-top: 0px;
	width: 750px;
	height: 30px;
	background-color: #000000;
	bottom: 0;
	_z-index: 5;
	display: block;
}

#menu a
{
	font-family: sans-serif;
	font-weight: lighter;
	font-variant: normal;
	color: #FFFFFF;
	text-decoration: none;
}

#menu a:hover
{
	text-decoration: underline;
}

#contentarea
{
	width: 730px;
	background-color: #FFFFFF;
	height: 100%;
	min-height: 100%;
	height:auto !important; /* real browsers */
	scrollbar-arrow-color: #969696;
	scrollbar-base-color: #000000;
	scrollbar-dark-shadow-color: #000000;
	scrollbar-3dlight-color:969696;
	scrollbar-face-color: #000000;
	scrollbar-highlight-color: #969696;
	scrollbar-shadow-color: #000000;
	scrollbar-darkshadow-color: #969696;
}

 

[RedLion]

Already tried something as:

<script>
contentarea.style.height = content.style.height;
</script>

But that didn't do the trick either because content.style.height didn't have a value...

 

[Vragabond]

The height of the #content element, within which lies your iframe is set to auto. That means it is as high as the content within it. Iframe is set at 100% of the parent, however when parent has no height it all reverts to auto. You need to set the height of the #content element.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[RedLion]

And it isn't possible to set the height of the #content to 100%? Within IE8 it all works nice, but within IE7 it doesn't...

What's the best solution then? Set it with javascript? Any idea how the javascript should look like, because content.style.height didn't gave any values as a result?

Thanks in advance!!!

 

[Vragabond]

I'm sorry but there are a few issues on your site that I think would be more important to address than the height issue:

1. It seems like you're using an iframe to load your own pages. I would use iframe very seldom and only if I would have to show a foreign website or potentially only a part of the website somewhere. To have an iframe inside an entire content where you load your pages is just silly. Simply change the entire page, it's much easier for users to navigate. And all the common elements are stored in the cache anyway, so loading time would be about the same.

2. If you're using an iframe, why not exploit its benefits? You use javascript to change the iframe contents, when a simple link with a target would work. Using javascript makes your site inaccessible to search engines.

3. Your iframe is your content. I think it would work much smoother if you simply replaced the #content div with the iframe, if you really think you need to use an iframe.

If it was me, I would simply got rid of the iframe. It is an unnecessary element and will cause you a lot more trouble than it will solve problems. Just like frames in general. If for some reason you cannot, make sure you try to implement points #2 and #3.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[RedLion]

Vragabond thanks for your help and responses!

Lets clear some things up, I develop a lot of big websites which are connected to content management systems and finance systems and all other kind of systems. Those sites are developed with ASP.NET and have a database behind them. And they generate whole pages within the ASP.NET pattern architecture.

But for some very small customers I have once developed a standard "method" that is dependent of an iframe which is located within an index.php which has al layout within it. To give the customers who don't know anything about html the possibility to edit their content on their site I have incorporated an wysiwyg-editor for which an iframe is needed, and to make sure the customers don't mess up the layout I load only content pages within the iframe so that they can't screw anything up. It is very low-budget to develop those sites in this way and still give them the possibility to edit the content (just a few lines of php code behind it).

I use this method since IE5, with a table layout. Because FF doesn't support table layouts so well I thought it would be time to switch to div-style layouts. But I know understand that the time is not ready yet to switch. Where IE4 till IE8 are backward compatible for the use of table layouts, they aren't for div-style layouts. And while most users have still IE6 50% and IE7 25% and IE8 + FF the rest of the market (as what I see on the sites I manage) I will stick to the table layouts and support IE.

So thanks for all the support and help! And for point 2, I add direct hyperlinks within the iframe tag so the search engines can reach my pages.

 

[Vragabond]

Excuse me RedLion, but I am afraid I need to clarify a few things:

1. Firefox has absolutely no issues with rendering tables. The shift from laying pages out using tables to using CSS has happened for other reasons, namely because of greater flexibility, simpler maintenance and more logical techniques. Whether you embrace new way of laying out pages or not has nothing to do with browsers (or minimally has to do with supporting outdated IE browsers, which handle CSS insufficiently), but with adopting modern methods in web creation.

2. The design you're implementing is overly complicated and cumbersome. In 2009 uses for frames, be it regular or iframes, should be minimal. Between server side scripting and AJAX, I don't think I would ever again look into any frame to produce my result. You would do best to do away with iframe as well.

3. It is never a good idea to replace default html behavior and mimic it through javascript. Your menu does so for no clear reason, since regular HTML links would work better and get much more support across various browsers and bots. The fact that search engine spiders will navigate to your page that holds the iframe and not be able to find any other page should be reason enough to abolish that method.

4. If you have an online WYSIWYG editor, making it work on only a specific part of the page should not be a problem. If you don't have one and are using an offline program that edits html files, you could incorporate one online very quickly given the multitude of textarea replacements that act as WYSIWYG editors.

Looking at all these points, it seems like you're clinging onto outdated technology because you're unwilling to embark on a few hour upgrade of your systems and make them more modern.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[RedLion]

Hi Vragabond, I really appreciate it that you go into a discussion about it with me!

To start with your last comment, I just found it the time to put some effort in a more modern way to develop simple websites that consist of 6 pages with the option of online changing the content with a WYSIWYG editor.

For layout I was thinking about going div based, but I think the time is not ready for this yet.

Throwing away the iframe would be nicer, I agree, but I can't think yet about how my framework should need to look like to set up such simple websites without putting a minimum of server side code in it. I would like to build low budget websites in a few hours, and that means that you don't need to put a lot of code into all pages.

3. Your right, this javascript normally looks a little bit different, I have some PHP code within this javascript function that takes care of the fact if the page should be displayed normally or within a WYSIWYG editor, that's the reason of this javascript function. So the user gives his name as a variable in the URL wich is read by the PHP code and that makes the decision for you how it is displayed. This way the site behaves as it would always been, but with the advantage that it can be edited.

4. Online, made it myself, looks much like Hotmail, with some PHP code behind that writes the changes back to its original file.

I will go and think about your points, and how I can make a more modern framework for my websites. Any ideas on how others are doing this?

Thanks!