[CSS] Height 100% - 150px - Softwareontwikkeling

zondag 5 juli 2009 17:21

Acties:

0 Henk 'm!

Topicstarter

Ik ben er ondertussen al een week mee bezig, maar ik kom er niet uit. Ik ben een site aan het maken waarin de header een fixed height heeft van 150px. Vervolgens moet daaronder een div komen die vanaf de header tot aan de grond bedekt. Zoals:

Normaal doe ik dit via 100% height, maar dan steekt de pagina 150px uit aan de onderkant. Is er een manier om 100% - 150px te doen? Verschillende sites kunnen me geen duidelijk antwoord geven...

The story so far: In the beginning the Universe was created. This has made a lot of people very angry and been widely regarded as a bad move.

zondag 5 juli 2009 17:23

Acties:

0 Henk 'm!

_JGC_

Kan je niet gewoon een div met 100% hoogte maken en daar je header bovenaan in zetten? Andere optie is met negatieve margin-top te werken.

zondag 5 juli 2009 17:27

Acties:

0 Henk 'm!

ReseTTim

Chocolate addicted

container maken met met een height van 100%, vervolgens daar een fixed div in plaatsen met een height van 150px. problem solved

spuit 11 eigenlijk

evt 3 div's maken..

HTML:

<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>

Cascading Stylesheet:

#container{
height: 100%;
}

#header{
height: 150px;
}

#content{

}

zoiets bijv

[ Voor 50% gewijzigd door ReseTTim op 05-07-2009 17:30 ]

Mijn profiel - Te koop: Overzicht van spullen..

zondag 5 juli 2009 17:33

Acties:

0 Henk 'm!

Xardas

Topicstarter

Bij nader inzien heb ik mijn probleem niet volledig uitgelegd. Ik heb een container met 100% height, vervolgens zit daarin een header met 150px en een div genaamd content die een dynamische percentage moet hebben.
In de div content wordt via PHP een pagina in geladen die een scrollbar laat zien aan de rechterkant indien deze groter is. De content-div is dus de enige met een scrollbar, niet de container.

[ Voor 12% gewijzigd door Xardas op 05-07-2009 17:37 ]

The story so far: In the beginning the Universe was created. This has made a lot of people very angry and been widely regarded as a bad move.

zondag 5 juli 2009 22:23

Acties:

0 Henk 'm!

Verwijderd

Zelf had ik een soort gelijk probleem in het verleden opgelost in combinatie met een javascript.

Het javascript leest de totale hoogte uit en geeft de totale hoogte - header terug aan de content. Alleen nog even het resizen van het venster ondervangen met een onresize op de body en je bent klaar.

Hier is mijn code.

code:

<script type="text/javascript">
      function test() {
        var divah = document.getElementById('HTML').offsetHeight;
        divah = divah - 150;
        document.getElementById('content').style.height = divah+"px";
      }
</script>

<body id="HTML" onload="test();" onresize="test();">

De content kun je vervolgens een overflow: scroll meegegeven.

zondag 5 juli 2009 22:40

Acties:

0 Henk 'm!

_JGC_

Behalve javascript, of meer van hetzelfde: expressions, is er, uitgezonderd frames gebruiken, geen CSS/HTML oplossing voor dit probleem. Misschien dat ik het mis heb, maar anders hoor ik het graag

[ Voor 18% gewijzigd door _JGC_ op 05-07-2009 22:41 ]

zondag 5 juli 2009 22:59

Acties:

0 Henk 'm!

Verwijderd

Denk dat je anders uit gaat komen op een tabellen layout. Tabel 100% hoogte geven. Een div met scrollbalk erin plaatsen. Maar dan zou ik persoonlijk nog steeds voor de javascript oplossing kiezen.

Andere oplossingen (los van frames) zijn er zover ik weet niet.

[ Voor 3% gewijzigd door Verwijderd op 05-07-2009 22:59 ]

zondag 5 juli 2009 23:13

Acties:

0 Henk 'm!

Verwijderd

_JGC_ schreef op zondag 05 juli 2009 @ 22:40:
Behalve javascript, of meer van hetzelfde: expressions, is er, uitgezonderd frames gebruiken, geen CSS/HTML oplossing voor dit probleem. Misschien dat ik het mis heb, maar anders hoor ik het graag

http://www.mennovanslooten.nl/blog/post/71

Truc is position:absolute gebruiken en een top+bottom property opgeven i.p.v. height, dan wordt de hoogte dynamisch.

zondag 5 juli 2009 23:30

Acties:

0 Henk 'm!

_JGC_

Ah, heb daar wel eens iets over gelezen idd, maar nadeel is dat niet alle browsers dat snappen. Die browsers snappen dan wel weer expression CSS-properties overigens.

zondag 5 juli 2009 23:34

Acties:

0 Henk 'm!

Verwijderd

Interessant artikel, als ik een gaatje weet te vinden komende week ga ik het eens testen. Was nog niet bekend met deze techniek. Maar in hoeverre wordt deze techniek ondersteund door Opera, Chrome en FireFox? Artikel is redelijk toe gespitst op IE.

zondag 5 juli 2009 23:53

Acties:

0 Henk 'm!

_JGC_

Opera, Chrome, Firefox en dergelijke ondersteunen gewoon absolute positionering met vaste left/right waarbij de hoogte en/of breedte automatisch worden uitgerekend. IE6 en IE7 kunnen dit niet, maar die hebben de "expression" css property, wat eigenlijk niet veel anders is dan de javascript methode van een paar posts hierboven.

maandag 6 juli 2009 00:05

Acties:

0 Henk 'm!

tonyisgaaf

Hier is een standaard fixed header layout. En hier nog één, maar dan zonder dat IE6 in quirks mode hoeft te staan.
En anders gewoon een keer Googlen op "fixed header css"

[ Voor 24% gewijzigd door tonyisgaaf op 06-07-2009 00:07 ]

NL Weerradar widget Euro Stocks widget Brandstofprijzen widget voor 's Dashboard

maandag 6 juli 2009 09:13

Acties:

0 Henk 'm!

Verwijderd

_JGC_ schreef op zondag 05 juli 2009 @ 23:53:
IE6 en IE7 kunnen dit niet, maar die hebben de "expression" css property, wat eigenlijk niet veel anders is dan de javascript methode van een paar posts hierboven.

IE7 kan het wel maar alleen in standards mode. Je hoeft de css expressions alleen voor IE6 te gebruiken.

maandag 6 juli 2009 09:15

Acties:

0 Henk 'm!

Mike2k

Zone grote vuurbal jonge! BAM!

Verwijderd schreef op zondag 05 juli 2009 @ 23:13:
[...]

http://www.mennovanslooten.nl/blog/post/71

Truc is position:absolute gebruiken en een top+bottom property opgeven i.p.v. height, dan wordt de hoogte dynamisch.

Zelf ben ik niet zo'n fan van absolute positioning omdat dit ervoor zorgt dat alle andere divs niet meer weten dat die div er is en je dus met margins moet gaan werken wat ervoor zorgt dat je pagina niet lekker sized op kleinere schermen...

Je kan toch gewoon doen:

code:

1	bottom: 0px;

en dan de height weghalen ?

[ Voor 83% gewijzigd door Mike2k op 06-07-2009 09:21 ]

You definitely rate about a 9.0 on my weird-shit-o-meter
Chuck Norris doesn't dial the wrong number. You answer the wrong phone.

maandag 6 juli 2009 11:39

Acties:

0 Henk 'm!

Xardas

Topicstarter

Verwijderd schreef op zondag 05 juli 2009 @ 23:13:
[...]

http://www.mennovanslooten.nl/blog/post/71

Truc is position:absolute gebruiken en een top+bottom property opgeven i.p.v. height, dan wordt de hoogte dynamisch.

Tof! Het werkt! Geniaal. Die met Javascript werkt ook, bedankt nogmaals voor het helpen! Mijn voorkeur gaat nu echter wel naar de CSS oplossing uit. Helaas is de site dan niet validated, maar je kunt niet alles hebben

The story so far: In the beginning the Universe was created. This has made a lot of people very angry and been widely regarded as a bad move.