madwax
asked on
100% Height combined with fixed height - is it possible?
Hi,
I have the banged my head against a wall the last couple of days and I see no light (yet). The thing is that I want to combne a menulayer with a fixed height of 30px with a content layer below that has the height 100%-30px. The problem is that all browsers translate the 100% height as heigh of the browser and hence I get a scrolling bar due to the 30px menu-div. Is this fixable?
http://www.ivtaco.se/test.php
Thanks in advance,
Regards,
//madwax
<!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>
<title>100% height layout works in Firefox and IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
width: 100%;
height: 100%; /* required */
margin:0;padding:0;
}
#layout {
background-color: #CCCCCC;
width:100%;
height: 100%;
margin:0;padding:0;
}
#topMenu{
background:red;
height:30px;
width:100%;
}
#content{
background:blue;
height:100%;
width:100%;
}
-->
</style>
</head>
<body>
<div id="layout">
<div id="topMenu">
</div>
<div id="content">
</div>
</div>
</body>
</html>
I have the banged my head against a wall the last couple of days and I see no light (yet). The thing is that I want to combne a menulayer with a fixed height of 30px with a content layer below that has the height 100%-30px. The problem is that all browsers translate the 100% height as heigh of the browser and hence I get a scrolling bar due to the 30px menu-div. Is this fixable?
http://www.ivtaco.se/test.php
Thanks in advance,
Regards,
//madwax
<!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>
<title>100% height layout works in Firefox and IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
width: 100%;
height: 100%; /* required */
margin:0;padding:0;
}
#layout {
background-color: #CCCCCC;
width:100%;
height: 100%;
margin:0;padding:0;
}
#topMenu{
background:red;
height:30px;
width:100%;
}
#content{
background:blue;
height:100%;
width:100%;
}
-->
</style>
</head>
<body>
<div id="layout">
<div id="topMenu">
</div>
<div id="content">
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
> the problem occurs when i put a iframe with a 100%
This indeed modifies the problem.
iframes are better than framesets because they can be inserted in the regular document flow.
If you don't care about the regular document flow, you might as well use a frameset. You'll get a much better final result.
i'll see if i can work something out anyway.
This indeed modifies the problem.
iframes are better than framesets because they can be inserted in the regular document flow.
If you don't care about the regular document flow, you might as well use a frameset. You'll get a much better final result.
i'll see if i can work something out anyway.
Nope, nothing works.
What are you trying to do by the way?
To frame some external site so that you can add your menu to it?
That's considered like bad practice. Open the page in a new window if you don't want the user to leave your site.
Or do you want to use that for your own site's navigation?
In this case you should do exactly the opposite of what you're doing: include the menu inside the content and not the content inside the menu.
It's the content that matters and each content should have a menu inside it. External sites and search engines will normally refer your content pages and not your menu. So, if you don't want links to point to "unframed" pages, put your menu inside an iframe located in you content pages.
What are you trying to do by the way?
To frame some external site so that you can add your menu to it?
That's considered like bad practice. Open the page in a new window if you don't want the user to leave your site.
Or do you want to use that for your own site's navigation?
In this case you should do exactly the opposite of what you're doing: include the menu inside the content and not the content inside the menu.
It's the content that matters and each content should have a menu inside it. External sites and search engines will normally refer your content pages and not your menu. So, if you don't want links to point to "unframed" pages, put your menu inside an iframe located in you content pages.
ASKER
Hi GrandS.
Thank you for your discussion - and I totally agree with you. The thing is that I am working on an extension of a WYSWIG-editor for a CMS-system. I know that the problem is easily solvable by either using tables or frames - but that it is considered bad practice. In the red div I have the CMS' menu and in the blue div I use a Iframe for the editor. Hence I cannot put the CMS' menu in the editor and I cannot open it in a new window either. Search engine optimization is neither an issue here.
I am beginning to think that the matter is unsolvable - unfortunately... :(
//madwax
Thank you for your discussion - and I totally agree with you. The thing is that I am working on an extension of a WYSWIG-editor for a CMS-system. I know that the problem is easily solvable by either using tables or frames - but that it is considered bad practice. In the red div I have the CMS' menu and in the blue div I use a Iframe for the editor. Hence I cannot put the CMS' menu in the editor and I cannot open it in a new window either. Search engine optimization is neither an issue here.
I am beginning to think that the matter is unsolvable - unfortunately... :(
//madwax
Using frames is considered bad parctice because you cannot bookmark the page, neither can you have a direct link to the full frameset with its content. But in this particular case, you don't need to bookmark neither your menu nor your editor. So, you can use a frameset without worries. There are absolutely no valid arguments against using frames in this case.
When using an Iframe, you MUST define a fixed height for the container of the Iframe, because if the container is 100% and the Iframe height is 100%, it resolves to 100% of nothing, hence is undefined. You can define the BODY tag to be a specific height, then the Iframe references to the body height, or you can define a table structure to a specific height, and put the Iframe in that -- a <TD height="600"> works like a charm, but you don't want this, from what you say, because it is "bad practice". I disagree. Leaving elements undefined is bad practice. SO to solve the situation, if you abhor tables, then choose a DIV structure with a class designation and use THAT to define the height -- then the Iframe under that, now has a definable height. It MUST have a parent height that is resolvable to a number.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER