Søg
Avatar billede submitt Nybegynder
03. april 2006 - 17:34 Der er 9 kommentarer og
1 løsning

Skalérbar højde

Hej eksperter

Jeg har læst mange spørgsmål og svar på problematikken omkring højde, men har desværre ikke fundet det endegyldige svar på netop mit problem. Jeg har beskrevet problemet ved at illustrere det i en gif på følgende URL:

http://home10.inet.tele.dk/falcken/sample.gif

Websiden skal indeholde en top og en bund. Begge skal have en fast højde i px. og må altså ikke være i %.

Imellem top og bund skal der være et område som er fleksibelt. Som tilpasser sig skærmopløsningen således at de tre områder (top, middle og bund) tilsammen ALTID udgør minimum 100% af browservinduet (i højden).

Om løsningen laves med CSS eller tabeller er underordnet. Bare 3 følgende kritierier overholdes:

1) Der skal benyttes doctype på siden (html 4.01 el. xhtml 1.0)

2) Skal validere i forhold til W3C.

3) Skal fungere i både IE og FF.

Men ... som sagt ... kig på min gif. Den udpensler det totalt.

På forhånd tak
Avatar billede Slater Ekspert
03. april 2006 - 18:01 #1
Burde være relativt simpelt med en tabel. Giv den en højde på 100% i CSS (og husk også at sætte html og body's højde til 100% og margin til 0), og så lav tre table rows, hver med sin <td> i, hvor kun den øverste og nederste har en højde sat i pixels.
Avatar billede submitt Nybegynder
04. april 2006 - 08:50 #2
100% i CSS? Det validerer ikke og virker ikke i FF.

Andre bud?
Avatar billede submitt Nybegynder
04. april 2006 - 09:26 #3
Hmmm .... testede det lige og det viser sig at det faktisk virker i FF. Men det virker dog ikke ikke i IE. I IE udvider top og bund sig og fylder det meste af skærmen, hvor imod middle bliver meget "lav".

Har du et hack der kan løse problemet?
Avatar billede mclemens Nybegynder
04. april 2006 - 10:25 #4
Også det resultat jeg nåede til :P
Skal vi javascripte en ie hack?
Avatar billede mclemens Nybegynder
04. april 2006 - 11:16 #5
giver lige et eksempelt ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

html,body{
height:100%;margin:0px;padding:0px;
}

#main{
width:100%;
height:100%;
margin:0px auto;
background-color:red;
}

#top{
height:70px;
background-color:yellow;
}

#bottom{
height:60px;
background-color:green;
}

</style>


<script type="text/javascript">
<!--

window.onload=alignit;

function alignit(){
document.getElementById("middle").height=document.getElementById("main").offsetHeight-130;
}

//-->
</script>

</head>


<body>
<table id="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="top">a</td>
</tr><tr>
<td id="middle">a</td>
</tr><tr>
<td id="bottom">a</td>
</tr>
</table>

</body></html>
Avatar billede mclemens Nybegynder
04. april 2006 - 11:46 #6
ved problemer med resize af vinduet så prøv at skifte script delen ud med denne

<script type="text/javascript">
<!--

window.onload=alignit;
window.onresize=alignit;

function alignit(){
document.getElementById("middle").height=100;
document.getElementById("middle").height=document.getElementById("main").offsetHeight-130;
}

//-->
</script>
Avatar billede submitt Nybegynder
08. april 2006 - 23:16 #7
Er ikke vild med at skulle løse det med et JavaScript, men det virker umiddelbart upåklageligt i IE, FF og Opera. Ved endnu ikke hvordan det ser ud i Safari, men du har jo løst opgaven og pointene er dine :-)
Avatar billede submitt Nybegynder
08. april 2006 - 23:17 #8
Sender du et svar jeg kan godkende?
Avatar billede mclemens Nybegynder
08. april 2006 - 23:17 #9
ok :)
Avatar billede mclemens Nybegynder
08. april 2006 - 23:19 #10
- og takker for point :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
White papers
Flere white papers »