100% height

**kimikai** · 05-06-2012, 09:41 AM

okay so right now,, i got everything of my website working, its also online
(website can be found on www.himalaya-hills.nl) then just select the english flag and youll be brought to the index page.
I'm totally happy with it,, because theres hardly any vertical scrolling. The problem right now is, that on bigger screen resolution the website part becomes really small and theres a big blue area behind it (which obviously isnt like that on smaller screens).

So to make it totally perfect (and i think it should be possible because im working with Iframes for my content), I want to make a setup that will make my weblayout expand all the way vertically and horizontally, for example have the weblayout containing 80% of the screens widht and 100% of the screens height. Now i got alittle setup of this, but its not working the way i want it to work yet, like with adding background images and stuff, because im working with percentages i cant say how big my images need to be.
Can any1 give me an example or tell me how to do it??
I'm really stuck on this

**molendijk** · 05-06-2012, 09:19 PM

Don't put your iframe in a table. Put it in an absolutely positioned div having values (in pixels and/or percentages) for left, top, right and bottom. The iframe must have:
position: absolute; width: 100%; height: 100%
Example:

Code:

<div style="position:absolute; left: 10px; top:10px; right:10px; bottom: 10px">
<iframe style="position: absolute; width: 100%; height: 100%"></iframe>
</div>

Arie Molendijk.

**kimikai** · 05-07-2012, 09:08 PM

Ye i figured the whole table setting isnt quite the best option, and i found out that the most likely way to fix stuff is by doing it in percentages, but iunno amybe i havent been clear enough in the first post i made, but what i need, is the setup of the layout i have now, just then expanding, the most important thing on that is ofcourse the banner image, if i cant get that to expend together with its div, ill have to find a way to make it fill in a decent way, so it still looks good or the banner image will look very small compared to the menu and content div on bigger screens. I dont know if theres an option for this? I got quite a part of the expanding layout setup already, im just struggling with the banner part, im happy with the way it looks in the screen and id like to keep it that way, that just wont be possible when the banner wont expand with its div.

Any options on this?

#problem fixed =)

**molendijk** · 05-08-2012, 11:25 AM

Start experimenting with something like this:

Code:

<body>

<img src="yourbanner.jpg" style="position:absolute; top:5%; left:15%; width:70%; height:25%; border:1px solid black">

<div style="position: absolute; top:30%; left:15%; width:20%; bottom:5%; border:1px solid black">
<iframe src="menu.html" style="position:absolute; width:100%; height:100%" frameborder="0"></iframe>
</div>

<div style="position: absolute; top:30%; left:35%; right:15%; bottom:5%; border: 1px solid black">
<iframe src="content.html" style="position:absolute; width:100%; height:100%" frameborder="0"></iframe>
</div>

</body>

Arie.

**kimikai** · 05-08-2012, 03:20 PM

yep i could get as far as to convert my layout to a fluid layout (with percentages).
Just the problem I'm having with that is that for example i cant get my banner to fit in properly (alot of open space is left on the sides (i set the max-height: to 100%. And also for the backgrounds of for example my menu and content (those bg's are kinda off standard cuz i worked on them in photoshop so no plain bg) I just cant seem to fix those in so they would properly expand to the div, making it look good.
The backgrounds is this n that but... the main issue for sure is the banner,, ill post a screenshot:

Uploaded with ImageShack.us

**kimikai** · 05-09-2012, 12:01 PM

Ill try to rerun my question because ive been working on the coding alittle more and i managed to get it done so that the div will have a (bg)image that will expand together with the div.
Just now the last thing i need to do is place the iframe OVER the image again. Any1 knows how to do this? right now this is my coding

HTML:

Code:

    
<div id="content">
    	<img id="content_bg" src="images/content_bg.jpg" class="stretch" />
             <iframe name="content_frame" src="aboutus.html" frameborder="0" width="100%" height="100%" allowtransparency="true" scrolling="auto"></iframe>
</div>

And the CSS:

Code:

#content {
    width: 70%;
	height:60%;
	min-height:60%;
    float: left;
	margin-left:2%;
	margin-top:2%;
}

#content_bg {
	width:100%;
	height:100%;
	position:relative;
	left:0px;
	top:0px;
	z-index:-2;
}

.stretch {
	width:100%;
	height:100%;
}

This includes the CSS style for the container (content) and the CSS so the image will position itself in the DIV as a background that will expand together with the content div.
I just havent been able to get the Iframe to do the same as the image =/.
I tried to give the Iframe the same CSS styling as the content_bg. Just with a diff z-index. But it didnt work like that

**molendijk** · 05-10-2012, 09:24 AM

No, that doesn't work. Why don't you do it the way I indicated above? Works here.
Arie.

**kimikai** · 05-10-2012, 02:42 PM

tbh ive changed the coding alittle bit, and it does work now, i have a div which contains the background that will contract and expand, and the iframe is laid ontop of it.
The problem wasnt really getting an Iframe inside the div, but the problem was to get a background with it that expanded and contracted when the rest of the website does

The coding i used is this:

HTML:

Code:

<div id="menu">
		<div id="menu_bg"><img src="images/menu_bg.jpg" class="stretchh"/>
        <div id="menu_frame">
        	<iframe name="menu" src="menu.html" frameborder="0" width="100%" height="100%" allowtransparency="true" scrolling="auto"></iframe>
        </div> 
        </div>  
    </div>
	
    <div id="content">
    	<div id="content_bg"><img src="images/content_bg.jpg" class="stretch" />
		<div id="content_frame">
        	<iframe name="content" src="aboutus.html" frameborder="0" width="100%" height="100%" allowtransparency="true" scrolling="auto"></iframe>
		</div>
    	</div>
	</div>

CSS:

Code:

#menu {
    width: 15%;
	height:60%;
	min-height:60%;
    float: left;
	margin-left:6%;
	margin-top:2%;
    height: auto;
}

#menu_bg {
	height:100%;
	width:100%;
	position:relative;
	left:0px;
	top:0px;
	z-index:-700;
}

#menu_frame {
	height:100%;
	width:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:100;
}

.stretchh {
	width:95%;
	height:100%;
}

#content {
    width:70%;
	height:60%;
	min-height:60%;
    float: left;
	margin-top:2%;
	margin-left:2%;
}

#content_bg {
	width:100%;
	height:100%;
	position:relative;
	left:0px;
	top:0px;
	z-index:-700;
}

#content_frame {
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:100;
}

.stretch {
	width:100%;
	height:100%;
}

**molendijk** · 05-10-2012, 04:50 PM

Sorry, doesn't work here. The iframes are inaccessible.
Arie.

**kimikai** · 05-11-2012, 07:37 AM

How come it doesnt work? I test it in IE and it works fine, i can scroll the iframe etc.

Edit, your code indeed works, i think it would even work without all the percentages for top, bottom etc, but the problem im having with that code, is that i have a background image which isn't a solid color, and i need the background to expand together with its div. That i could not get done, but seems to work with my code...

Thread: 100% height

Thread Tools

Search Thread

100% height

Bookmarks

Bookmarks

Posting Permissions