[FF & IE ] Height 100% - Softwareontwikkeling

maandag 7 augustus 2006 13:24

Acties:

Topicstarter

Ok, ik zit met een vervelend probleem, wat ik niet krijg opgelost.
het betreft het volgende :
mijn website heeft een "uber Container" die ingesteld staat op 100% width en height
in deze uber container zit een Header div van een height van 120px;
Hieronder zou ik graag een nieuwe "Container" willen maken die 100% height heeft.

Het probleem wat er gebeurd is dat hij de grootte van de uber container negeert en ik krijg dus een scrollbar, want hij pakt 100% ( de volledige beeldschem grootte ).
Dit is niet de bedoeling. nu is dit voor Internet Explore wel op te lossen via een CSS hack, maar ik wil dit liever niet toepassen.

Got search leverde me alleen maar 100% "Uber Div" problemen. en geen resultaat wat op mijn probleem slaat

Aangezien code meer zegt dan woorden
html

code:

<body>

<div id="Uber">
    <div id="Header"></div>
    <div id="Down_Container"></div>
</div>
</body>

CSS

code:

html, body {
    width:100%;
    height:100%;
    overflow:auto;
    margin:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url(images/bk225.gif);
}

#Uber {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background-color:#00CCFF;
}

#Header {
    width:1012px;
    height:119px;
    background-image: url(images/Respond1_1.jpg);
}

#Down_Container {
    width:1012px;
    height:100px;
    margin:0px;
    padding:0px;
    background-color:#663333;
}

ps : CSS hack voor IE,

code:

1	_height: expression(document.body.clientHeight - 120 + 'px');

maandag 7 augustus 2006 13:27

Acties:

moozzuzz

Zoek es op faux column(s) en pas het toe in de hoogte. Basically:

code:

<body>
#uber
---> #h100 100% height met margin-top >=120px naargelang wens
---> #header
</body>

Ik ben zeer tevreden van het resultaat.

maandag 7 augustus 2006 14:01

Acties:

Vecodo

Topicstarter

moozzuzz schreef op maandag 07 augustus 2006 @ 13:27:
Zoek es op faux column(s) en pas het toe in de hoogte. Basically:
code:
1
2
3
4
5
<body>
#uber
---> #h100 100% height met margin-top >=120px naargelang wens
---> #header
</body>
Ik ben zeer tevreden van het resultaat.

Dus eigenlijk zeg je dat de volgorde verander moet worden
Want als ik dit doe :
HTML

code:

<div id="Uber">
    <div id="Down_Container">
        <div id="Header">
            <div id="Images"></div>
        </div>
    </div>
</div>

en ik geef aan de Down_Container een margin van 120px ok. dan werkt het
alleen het volgende probleem is dan als volgt
in de Down_Container div komen tevens 3 divs die allemaal een height vam 100% hebben. dus heb ik het zelfde probleem.
Die faux colums snap ik niet helemaal, maar ga maar meer informatie daar overin zien te winnen.,

--edit--
Nogmaals naar die Faux Colums gekeken, deze werkt dus met background images. dit kan ik niet gebruiken, want de Down_Container krijgt weer 3 divs inzich. en in deze 3 divs komen of Tables te staan of andere divs die een position:relative meekrijgen bv voor adres of iets dergelijks.

dus mensen nog meer idee-en ?

[ Voor 15% gewijzigd door Vecodo op 07-08-2006 14:07 ]

maandag 7 augustus 2006 15:19

Acties:

moozzuzz

Nee ik doe het zo:

HTML:

<div id="Uber">
    <div id="Down_Container">
       <!-- whatever -->
    </div>
    <div id="Header"><!-- bij mij één image als achtergrond -->
    </div>
    <div id="Menu">
    </div>
</div>

De Header/Menu is bij mij absolute gezet, dus uit de "gewone" flow. Klik voor een gebrekkige impl.
+ onlangs heb ik het mss beter uitgelegd ergens op dit forum..

[ Voor 7% gewijzigd door moozzuzz op 07-08-2006 15:20 ]

maandag 7 augustus 2006 15:38

Acties:

Vecodo

Topicstarter

moozzuzz schreef op maandag 07 augustus 2006 @ 15:19:
*Knip

Doe het nu als volgt
Ik maak 1 grote div, waarin ik drie divs plak met wat floats en deze hebben allemaal 100%;
de divs die in de 3 komen die geef ik een margin 120px; mee en ik maak 1 div de header div, die heeft een absolute positie.

Niet helemaal de juiste en correcte manier denk ik zo ? ( ik ben zelf sowieso geen fan van absolute post. ) maar denk niet dat het anders kan zonder CSS hacks ?