Avatar billede hoppe11 Nybegynder
15. marts 2008 - 17:32 Der er 12 kommentarer og
1 løsning

height 100%

hvordan kan man lave en div eller andet element til at være 100% i højden? når jeg fjerner doctype flyder elementet ud som det skal, men ellers har det kun en højde på en linje?

årsagen er at jeg vil have et element til at være centreret både vandret og lodret

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<style type="text/css">
* {
    font-family:tahoma;
    font-size:11px;
    color:#000000;
}

html, body {
    height:100%;
    width:100%;
}

body {
    margin:0;
}
</style>

<body>

<div style="height:100%; width:100%; background:#ff0000">
asdf
</div>

</body>

</html>
Avatar billede thesurfer Nybegynder
15. marts 2008 - 17:48 #1
Koden virker fint i Opera.. Husk også "padding:0px;".. ("px" kan undlades hvis værdien er "0", men jeg foretrækker altid at tilføje "px")

Hvilken browser tester du med?
Avatar billede thesurfer Nybegynder
15. marts 2008 - 17:51 #2
Jeg har lige testet med Internet Explorer 6 SP2 og Mozilla FireFox v2.0.0.12.. begge ser korrekt ud..

I FireFox er teksten "asdf" dog lidt "på vej ud" i venstre side af skærmen, pga "margin:0"..
Avatar billede hoppe11 Nybegynder
15. marts 2008 - 17:56 #3
jeg tester med både IE6 og FF2

er hele dit skræmbillede rødt?
Avatar billede hoppe11 Nybegynder
15. marts 2008 - 17:58 #4
argh...

fordi jeg havde et form-tag omkring mit div-tag :P

smid et svar
Avatar billede hoppe11 Nybegynder
15. marts 2008 - 18:00 #5
men

jeg synes ikke jeg kan få vertical-align til at virke?

<div style="height:100%; width:100%; text-align:center; vertical-align:middle; background:#ff0000">
asdf
</div>
Avatar billede kalp Novice
15. marts 2008 - 18:00 #6
jeg vil også mene koden er korrekt.
div'ens parent (body) har 100% højde og bredte hvilket gør din div burde få det samme.

måske er der andre tags i din kode end det vi ser?
f.eks i .NET smider den <form runat="server">

ind efter body.. den kan du tilgengæld også bare give 100% og bredte .. så vil det fungerer.
Avatar billede thesurfer Nybegynder
15. marts 2008 - 18:27 #7
Hmm.. jeg tror at vertical-align kun virker på billeder og celler i tabeller.. selvom der står:

"The vertical-align property specifies the vertical alignment of an inline or table-cell element."
http://developer.mozilla.org/en/docs/CSS:vertical-align

Jeg kunne ikke finde noget specifikt på W3C..
Avatar billede olebole Juniormester
15. marts 2008 - 23:19 #8
<ole>

- ikke helt. Vertical-align virker helt specielt på tabelceller - i forhold til alle andre elementer.

På en tabelcelle bestemmer vertical-align, hvordan indholdet skal vertikalt placeres i cellen.

På alle andre inline-elementer bestemmer vertical-align, hvordan elementet skal placere sig i forhold til andet inline-indhold i det omkransende element.

Tydeliggjort eksempel på de tilgængelige værdier:

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - none</span> <input type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - top</span> <input style="vertical-align:top" type="text"></p>


<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - middle</span> <input style="vertical-align:middle" type="text"></p>


<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - baseline</span> <input style="vertical-align:baseline" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - bottom</span> <input style="vertical-align:bottom" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - text-top</span> <input style="vertical-align:text-top" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - text-bottom</span> <input style="vertical-align:text-bottom" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - sub</span> <input style="vertical-align:sub" type="text"></p>

<p style="font:bold 72px tahoma,sans-serif;border:1px solid red">
    <span>BlaBla - super</span> <input style="vertical-align:super" type="text"></p>

/mvh
</bole>
Avatar billede hmm10 Nybegynder
16. marts 2008 - 13:00 #9
Nu ved jeg ikke hvilke(t) element, som du vil have centreret og hvor:

<style>
body {margin:0px;}
#center {position:absolute;top:50%;left:50%;background:red;width:200px;height:100px;margin-left:-100;margin-top:-50px;}
</style>
<div id='center'>center</div>
Avatar billede thesurfer Nybegynder
16. marts 2008 - 13:09 #10
Så vidt jeg kan huske:
Hvis man bruger "position:absolute;top:50%;left:50%;", skal man samtidigt bruge:

margin-left:MINUS_HALVDELEN_AF_BREDDEN_PÅ_BOKSEN_DER_SKAL_CENTRERESpx;
margin-top:MINUS_HALVDELEN_AF_HØJDEN_PÅ_BOKSEN_DER_SKAL_CENTRERESpx;

Og jeg tror at det er det hmm10 har gjort, men har glemt at sige det.. :-)
Avatar billede olebole Juniormester
16. marts 2008 - 15:13 #11
- præcis, men problemet er som oftest, at elementet, der skal vertikalt centreres, har dynamisk indhold og dermed ukendt højde. Kender man højden, kan man sagtens placere elementet lodret centreret  :)
Avatar billede thesurfer Nybegynder
16. marts 2008 - 15:37 #12
Og så er det her at JavaScript kommer ind i billedet.. :-)
Avatar billede hoppe11 Nybegynder
22. december 2008 - 17:32 #13
lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester