[HTML / CSS] Div height 100%, width fixed wil niet centreren

woensdag 9 februari 2011 15:32

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goedenmiddag,

Ik zit met een probleempje wat heel logisch lijkt maar niet wil lukken.
Heb een divje, met in het CSS de eigenschappen FIXED positie en margin op auto en de height op 100%.
Nu wil hij wel max grootte geven, Maar centreren weigert ie.

Nu wil hij wel centreren op position: relative maar dan weigert ie weer max hoogte te geven.

Ik loop hier ongeloofelijk op vast.
Want ik lijk hier weinig voorbeelden of oplossingen op Google voor te vinden.
Misschien zijn die er wel. Maar ik vindt ze niet.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
html {
    padding: 0px;
    margin: 0px;
}
#hoi {
    width: 500px;
    height: 100%;
    top: 0px;
    background-color: #CCFF99;
    position: fixed;
    margin: auto;
}
</style>
</head>
<body>


<div id="hoi">

slidhosdjpsjd

</div>

</body>
</html>

Ziet iemand misschien het probleem?

woensdag 9 februari 2011 15:42

Acties:

0 Henk 'm!

Raynman

Met [google=div 100% height] (en die 'fixed' weg) ben je er volgens mij toch echt heel snel. Ook op GoT komt dit vaker voorbij.

woensdag 9 februari 2011 15:45

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Raynman schreef op woensdag 09 februari 2011 @ 15:42:
Met [google=div 100% height] (en die 'fixed' weg) ben je er volgens mij toch echt heel snel. Ook op GoT komt dit vaker voorbij.

Ja dat wel.
Het gaat me ook niet om de height.
Maar : height: 100% + margin: auto

woensdag 9 februari 2011 15:59

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

http://www.google.nl/search?q=css+center+div geeft genoeg resultaten

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 9 februari 2011 16:09

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

MueR schreef op woensdag 09 februari 2011 @ 15:59:
http://www.google.nl/search?q=css+center+div geeft genoeg resultaten

Ja dat geeft het ook wel.
Maar ik wil niet ALLEEN centreren.

DAT LUKT!!

Maar niet + height. Dan weigert ie plots als ik 100% height wil.

woensdag 9 februari 2011 16:09

Acties:

0 Henk 'm!

Raynman

Verwijderd schreef op woensdag 09 februari 2011 @ 15:45:
[...]

Ja dat wel.
Het gaat me ook niet om de height.
Maar : height: 100% + margin: auto

Nee, het gaat je wel om die height. Je gebruikt position:fixed om 100% hoogte te halen, maar daardoor werkt het centreren niet meer. Daarom zei ik: haal die fixed weg en google naar de gebruikelijke manier om die 100% height te krijgen.

donderdag 10 februari 2011 12:41

Acties:

0 Henk 'm!

bindsa

Het gaat hier om een vrij bekende hack. Met 2 minuten googelen had je het zelf ook kunnen vinden: http://tom.me.uk/html-to-css/center-vertically.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
html { 
    padding: 0px; 
    margin: 0px; 
} 
#hoi { 
    width: 500px; 
    height: 100%; 
    top: 0px; 
    background-color: #CCFF99; 
    position: absolute;
    margin: 0;
    margin-left: -250px;
    left: 50%;
 
} 
</style> 
</head> 
<body> 


<div id="hoi"> 

slidhosdjpsjd 

</div> 

</body> 
</html>

donderdag 10 februari 2011 12:50

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Html

L0calh0st schreef op donderdag 10 februari 2011 @ 12:41:
Het gaat hier om een vrij bekende hack. Met 2 minuten googelen had je het zelf ook kunnen vinden: http://tom.me.uk/html-to-css/center-vertically.html
[...]

fixed != absolute natuurlijk, en die negatieve margin-truuk heeft nogal wat nadelen...

Wat topicstarter zou kunnen doen is iets als dit:

Cascading Stylesheet:

#outer {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
}
#inner {
    width: 500px;
    height: 100%;
    background-color: #CCFF99;
    margin: 0 auto;
}

HTML:

<div id="outer">
    <div id="inner">
        slidhosdjpsjd
    </div>
</div>

Intentionally left blank

Onderwerpen