?
Solved

100% Height combined with fixed height - is it possible?

Posted on 2005-03-15
11
Medium Priority
?
480 Views
Last Modified: 2012-06-27
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>


0
Comment
Question by:madwax
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
11 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 1000 total points
ID: 13543382
You should not need to set the height of the #content.
The content will just take whatever space it needs.

If it's a matter of background image/color, then set your background on the parent element.
If it's a matter of scrollbars when overflow i also think it can be worked out without needing to set the height.
0
 
LVL 7

Author Comment

by:madwax
ID: 13544509
Well, the problem occurs when i put a iframe with a 100% height or similar in the field below. Unfortunately it is not a graphical issue, neither a content issue. The problem is e.g. solvable by applying <100% height to the body, but I really need it to be 100% since I am going to use the area for an iframe...

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13544854
> 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.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13545519
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.
0
 
LVL 7

Author Comment

by:madwax
ID: 13549942
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
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13550018
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.
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13562548
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.
0
 
LVL 23

Assisted Solution

by:sciwriter
sciwriter earned 1000 total points
ID: 13562555
The matter is unsolvable -- absolutely NO way.  The solution is that any percentage of any element must be a percentage of some defined number, not an undefined quantity.  This is fundamental to all HTML page layout.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month10 days, 1 hour left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question