css - Div de resterende hoogte laten innemen

[Storme]

Ik zit met het volgend probleem; Ik heb een paar layout met een header, linkermenu, inhoud en een footer, voor de gemakkelijkheid rap ff gepaint



Wat ik dus wens te realiseren is dat die gele div de complete hoogte tot de footer inneemt, dit omdat er een iframe in hoort te komen. Het is geen kwestie van die iframe weg te laten aangezien ik hier op mijn stageplaats zit en dit is wat ze willen, heb ze het al proberen af te babbelen, maar dit heeft geen nut.

De betreffende site zover

Hier m'n html code:

code:

<div id="container">
    <div id="content">
        <div id="header">
            <div id="topmenu">
            login - register
            </div>
        </div>
        <div id="inhoud">
            <div id="leftmenu">
                Testje qmsldfjqosidf jqsmldfqk jqsdof jqsodfi jqsmlkdfj qsodfij qsdjof qlskdfj qoisdfj qlsjdf lqskdjfio qsjdf oiqsjdf qjsdfl jqsiodfj
            </div>
            <div id="center">
                <iframe  id="main" name="main" src="testpage.htm" width="100%" height="100%"  frameborder="no"></iframe>
            </div>
            <div id="footer">
            test tekst
            </div>
        </div>
    </div>
</div>

De div die de resterende hoogte moet innemen is 'center'.

Mijn css code:

code:

html {
    height:100%;
    margin: 0;
    padding: 0;
    }
body {
    margin: 0;
    padding: 0;
    height: 100%; 
    min-height: 100%;
    _height: 100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#738a39;
    }
    #filler {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    }
#container {
    
    height: 100%;
    min-height: 100%;
    _height: 100%;
    }
#content {
    position:relative;
    padding-left:5px;
    padding-right:5px;
    padding-top:0px;
    padding-bottom:0px;
    background: url(../img/c_back.gif) top left repeat-y;
    background-color:#9c9a8a;
    right: auto;
    left: 50%;

    min-height: 100%;
    _height: 100%;
    width: 957px;
    margin-left: -475px;
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: -475px;
    }
#header {
    background: url(../img/header.jpg) top left;
    height:217px;
    width:957px;
}
#topmenu {
    position:absolute;
    left:345px;
    top:118px;
    width:617px;
    height:36px;
    color:#FFFFFF;
    margin-top:7px;
}
#leftmenu {
    float:left;
    width:211px;
}
#center {
    float:right;
    width:745px;
    height:100%;
    background-color:#EEEEEE;
}
#footer {
    clear:both;
    position:absolute;
    bottom:0px;
    border-top:2px solid #FFFFFF;
    width:957px;
    background-color:#4b652b;
}
#Inhoud {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    /*height:100%;
    min-height:100%;*/
    background: url(../img/bg_content.jpg) top left repeat-y;
    background-color:#9c9a8a;
    }
#menu {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height:253px;
    }

[Arch-IT-ect]

Dat is een heel rot geval, heb dat ook ooit geprobeerd en het is me maar half gelukt, wat ik ook probeerde, de div was ofwel een klein beetje groter dan 100% ofwel een klein beetje kleiner. Geef me eventjes en ik snor de site in kwestie wel even op

[Sappie]

Je kunt hier, voor zover ik het topic goed begrijp (ik heb nog niet de moeite genomen alles door te nemen) gebruikmaken van het zogenaamde faux columns. Je kunt dan dus de background van je center div weglaten, zodat de achtergrond van de div Inhoud weer wordt gebruikt.

edit:

Ik merk ook dat je behoorlijk last hebt van 'divitis'. Je gebruikt dan ook te pas en te onpas ergens een div voor. Zoek eens op semantische html. Verder is een goede structuur erg belangrijk, gebruik daarvoor headings Hx

[ Voor 30% gewijzigd door Sappie op 19-04-2007 10:07 ]

[Arch-IT-ect]

Net even gekeken en de site is helemaal fucked up nu, (IE7) maar ook in opera en FF, dus ik denk niet dat je met die code iets zal zijn

[Storme]

Sappie schreef op donderdag 19 april 2007 @ 10:04:
Je kunt hier, voor zover ik het topic goed begrijp (ik heb nog niet de moeite genomen alles door te nemen) gebruikmaken van het zogenaamde faux columns. Je kunt dan dus de background van je center div weglaten, zodat de achtergrond van de div Inhoud weer wordt gebruikt.

Mijn center div bevat een Iframe, en die achtergrondkleur is er momenteel enkel om de hoogte ervan te zien. Nu is dit ook niet echt mijn probleem, het is de bedoeling om die div de resterende hoogte te laten innemen.

anti-rsca schreef op donderdag 19 april 2007 @ 10:05:
Net even gekeken en de site is helemaal fucked up nu, (IE7) maar ook in opera en FF, dus ik denk niet dat je met die code iets zal zijn

Da's spijtig, ik kan ook altijd met een tabel gaan werken, maar daar zie ik wat tegenop.

Ik merk ook dat je behoorlijk last hebt van 'divitis'. Je gebruikt dan ook te pas en te onpas ergens een div voor. Zoek eens op semantische html. Verder is een goede structuur erg belangrijk, gebruik daarvoor headings Hx[/edit]

Ja, je hebt gelijk, maar de website waar ik het voor maak is ook al niet te strikt met die zaken dus mja. Zal voor m'n volgende project zijn

[Sappie]

Als je een iframe (of een block element van een bepaalde hoogte uberhaupt) in je center div zet rekt de automagisch mee. Mbv faux columns kun je prima nabootsen dat je center div 'doorloopt'. Wil je per se dat je center div tot onderaan doorgaat, dan zul je t een en ander wat anders aan moeten pakken. Al kan ik me dat in jouw geval niet echt voorstellen. (misschien kun je het uitleggen?)

Ik gebruikte zelf weleens het volgende:

Sappie in "[HTML] Footer DIV"

Hiermee moet je zeker op weg geholpen kunnen worden.

[ Voor 14% gewijzigd door Sappie op 19-04-2007 10:30 ]

[Storme]

Lost m'n probleem niet op iig.

ik heb het nu gewoon met een javascriptje opgelost wegens het platform ze hier ontwikkelen toch vereist dat je een javascript enabled browser hebt.

Voor de geinteresseerden, hier het scriptje:

code:

<script type="text/javascript" >
<!--
function fixHeight() {
bheight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
h = document.getElementById("header").offsetHeight;
f = document.getElementById("footer").offsetHeight;
c = document.getElementById("center");
i = document.getElementById("main");
c.style.height = (bheight - h - f) +"px";
i.style.height = (bheight - h - f) +"px";
}

fixHeight();
window.onresize = fixHeight;

-->
</script>

Btw, mag slotje op deze topic.

[Tsunameh]

Wat ik meestal doe is de body padding/margin op 0 zetten, en dan de margin-bottom van de footer op 0, of de smerige manier met negatieve margin's.

Maar de JS oplossing is misschien beter

[Sappie]

Storme schreef op donderdag 19 april 2007 @ 12:10:
Lost m'n probleem niet op iig.

ik heb het nu gewoon met een javascriptje opgelost wegens het platform ze hier ontwikkelen toch vereist dat je een javascript enabled browser hebt.

Voor de geinteresseerden, hier het scriptje:

code:

<script type="text/javascript" >
<!--
function fixHeight() {
bheight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
h = document.getElementById("header").offsetHeight;
f = document.getElementById("footer").offsetHeight;
c = document.getElementById("center");
i = document.getElementById("main");
c.style.height = (bheight - h - f) +"px";
i.style.height = (bheight - h - f) +"px";
}

fixHeight();
window.onresize = fixHeight;

-->
</script>

Btw, mag slotje op deze topic.

Naja een imho vieze javascript oplossing. Verder zou je er toch echt op een andere manier uit moeten kunnen komen. Verder heb je nog steeds niet aangegeven waarom je eigenlijk een div nodig hebt tot het begin van de footer.

[Storme]

Sappie schreef op donderdag 19 april 2007 @ 12:40:
[...]

Naja een imho vieze javascript oplossing. Verder zou je er toch echt op een andere manier uit moeten kunnen komen. Verder heb je nog steeds niet aangegeven waarom je eigenlijk een div nodig hebt tot het begin van de footer.

Eventjes mezelf quoten :

Storme schreef op donderdag 19 april 2007 @ 09:58:
Wat ik dus wens te realiseren is dat die gele div de complete hoogte tot de footer inneemt, dit omdat er een iframe in hoort te komen. Het is geen kwestie van die iframe weg te laten aangezien ik hier op mijn stageplaats zit en dit is wat ze willen, heb ze het al proberen af te babbelen, maar dit heeft geen nut.

Dus die iframe moet de resterende hoogte innemen, en die iframe zit dus namelijk in die div.

[Sappie]

Storme schreef op donderdag 19 april 2007 @ 09:58:
Wat ik dus wens te realiseren is dat die gele div de complete hoogte tot de footer inneemt, dit omdat er een iframe in hoort te komen. Het is geen kwestie van die iframe weg te laten aangezien ik hier op mijn stageplaats zit en dit is wat ze willen, heb ze het al proberen af te babbelen, maar dit heeft geen nut.

Uit dit stuk kan ik niet halen dat de iframe de rest van de hoogte op moet vullen... maargoed. Dan wordt het iig een stuk lastiger. Javascript / tables kun je imho idd rechtvaardigen teneinde dit cross-browser werkend te krijgen.

Ik heb het wel, uitgaande van het voorbeeld wat ik eerder gaf, opgelost in FF2.0.3. Maarja IE6 doet daar iig nix goeds mee.

[Storme]

Sappie schreef op donderdag 19 april 2007 @ 14:40:

Ik heb het wel, uitgaande van het voorbeeld wat ik eerder gaf, opgelost in FF2.0.3. Maarja IE6 doet daar iig nix goeds mee.

Niet echt, die container div past zijn hoogte ook niet aan tot aan de footer, die groeit nu gewoon mee met de content.

Ik heb ook heel wat gegoogled, en het lijkt mij niet te realiseren met enkel css. Ik laat het nu zo met de javascript, dit werkt prima en zoals al aangegeven dwingt de website toch javascript af voor andere zaken.

Maar toch bedankt voor de hulp !