Søg
Avatar billede fixxxer Nybegynder
27. marts 2006 - 22:17 Der er 41 kommentarer og
1 løsning

fuld højde design

Jeg jamre mig over mine manglende CSS færdigheder, og tyr til Ekspertens CSS guruer for hjælp til følgende:

Jeg vil lave et design der altid er 100% højt i browseren men med en margin på 10px i top og bund, så resultatet bliver noget lignende følgende:

www.jbweb.dk/css_3rows_design_fullheight.jpg

Bemærk borderen hele vejen rundt. Når indholdet fylder mere end browser-vinduets højde, udvider designet sig selvfølgeligt.

Er der nogen der har et bud på hvordan det kan lade sig gøre?
Avatar billede miss-g Seniormester
27. marts 2006 - 22:50 #1
Noget i den her stil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    padding: 10px;
    height: 100%;
}
-->
</style>
</head>

<body>
<table width="700" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#666666">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede fixxxer Nybegynder
27. marts 2006 - 22:59 #2
Desværre det tvinger en scrollbar på i IE, og i Firefox bliver tabellen ikke 100% høj..
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:03 #3
Lige nu forsøger jeg med følgende:

html, body { background-color: #d1fed4; margin: 0; padding: 0; height: 100%; }
#page { background-color: #cf1616; position: relative; width: 760px; height:auto !important; height:100%; text-align: center; min-height: 100%; margin-right: auto; margin-left: auto; }


<div id="page">
    <div style="background-color: #5b92ed; height: 100%;">noget 100% indhold</div>
</div>


Med følgende DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

- hvorfor kan et div inde i 100% højt div ikke også være 100% højt! kunne det lade sig gøre ville jeg være meget tættere på en løsning..
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:05 #4
ikke muligt (tror jeg ikke)...
samme type problem ovre i denne tråd:
http://www.eksperten.dk/spm/698180
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:05 #5
glemte update... normalt kan man ikke sætte højde=100%...
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:07 #6
se IE vs. FF

<!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>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;">

<div id="leftcontainer" style="margin:0px auto;width:700px;height:100%;background-color:red;">
abc</div>

</body></html>
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:09 #7
... du skal i dit eksempel have
<div id="page" style="height:100%;">
- ellers er den øvre ikke 100% i højden ...
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:09 #8
... my bad det har du også ...
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:10 #9
<!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>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;">

<div id="page" style="margin:0px auto;width:700px;height:100%;background-color:red;">

<div style="background-color: #5b92ed; height: 100%;">noget 100% indhold</div>

</div>

</body></html>
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:11 #10
Ja, men jeg har height: auto !important; som vist slår til hvis indholdet er mere end 100% højt..

- så måske er det den der laver rod i den..
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:13 #11
mclemens > dit sidste eksempel virker ikke i Firefox
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:14 #12
mclemens > dit sidste eksempel virker ikke i Firefox>

- se lig dem her:
27/03-2006 23:05:11
27/03-2006 23:09:55
27/03-2006 23:07:32

... IE overholder ikke css regler som FF gør
- du kan normalt ikke sætte height:100%;
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:16 #13
27/03-2006 23:09:55 skulle have været 27/03-2006 23:05:59 ???
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:20 #14
Følgende virker fantatisk i FF:

html, body { background-color: #d1fed4; margin: 0; padding: 0; height: 100%; }
#page { background-color: #cf1616; position: relative; width: 760px; height:auto !important; height:100%; text-align: center; min-height: 100%; margin-right: auto; margin-left: auto; }
#outer-page { background-color: #777db3; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; }

<div id="page">
    <div id="outer-page">noget 100% indhold</div>
</div>


- men selvfølgelig ikke i IE..!
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:21 #15
Scratch that.. det gør den ikke :)
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:30 #16
håber jeg har den... omlidt - men det er vist noget fusk af tredje rang ... prøver den lige :P
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:31 #17
Hehe fusk er helt ok, bare det virker :)
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:34 #18
nitte...
Avatar billede miss-g Seniormester
27. marts 2006 - 23:35 #19
Den er ikke nem. Ser ud til at mit svar vist bare må afvises - skrev sådan set også "noget i den stil".

Hvis man kunne finde nogle sider med den funktion kunne man se i koden...
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:38 #20
den skal nok komme :P ... måske

<!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>

<script>
window.onload=function(){
alert(document.body.clientHeight);
newheight=document.body.clientHeight*0.5557;
document.getElementById("inner").style.height=newheight+"px";
document.getElementsByTagName("body").item(0).style.padding="0px";
}
</script>
</head>

<body style="margin:0px;padding:100%;">

<div id="inner" style="background-color:red;"></div>

</body></html>
Avatar billede fixxxer Nybegynder
27. marts 2006 - 23:38 #21
Ja jeg kan godt forestille mig at den ikke er nem i ren CSS - det er nok nødvendigt at have et JS hack ind over, og det er jo noget fusk !-)

Nu kan vi jo se om der i morgen er nogle med friske øjne, der kan se løsningen.

Indtil videre tak for jeres interesse..!
Avatar billede mclemens Nybegynder
27. marts 2006 - 23:51 #22
ja, jeg kan heller ikke se løsningen :P
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:08 #23
sidste forsøg ;)

<!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>

<script>
window.onload=function(){
if(document.body.clientHeight>100)newheight=document.body.clientHeight;
else if(window.innerHeight>100)newheight=window.innerHeight;
document.getElementById("inner").style.height=newheight+"px";
}
</script>
</head>

<body style="margin:0px;height:100%;">

<div id="inner" style="margin:0px auto;width:700px;height:1px;overflow:hidden;background-color:red;"></div>

</body></html>
Avatar billede fixxxer Nybegynder
28. marts 2006 - 00:11 #24
Desværre, det går galt når indholdet er højere end vinduet..

Og så skal den have en margin i top og bund.
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:19 #25
bedre ?

<!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>

<script>
window.onload=function(){
if(document.body.clientHeight>100)newheight=document.body.clientHeight;
else if(window.innerHeight>100)newheight=window.innerHeight;
document.getElementById("inner").style.height=newheight+"px";
}
</script>
</head>

<body style="margin:10px;height:100%;">

<div id="inner" style="margin:0px auto;width:700px;height:1px;background-color:red;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>v
</div>

</body></html>
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:21 #26
ikke helt :/
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:23 #27
det var bedre...

<!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>

<script>
window.onload=function(){
if(document.body.clientHeight>100)newheight=document.body.clientHeight-20;
else if(window.innerHeight>100)newheight=window.innerHeight-20;
document.getElementById("inner").style.height=newheight+"px";
document.getElementsByTagName("body").item(0).style.height="auto";
}
</script>
</head>

<body style="margin:10px;height:100%;">

<div id="inner" style="margin:0px auto;width:700px;height:1px;background-color:red;">

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

</div>

</body></html>
Avatar billede fixxxer Nybegynder
28. marts 2006 - 00:28 #28
FF er ikke med på vognen :)
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:29 #29
miss-g>
Jeg så ikke din post, inden jeg prøvede med html uden js...
Havde jeg set den, så havde jeg sparet et par forsøg.... :/
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:30 #30
arg... hvorfor er browsere ikke ens :P
Avatar billede Slettet bruger
28. marts 2006 - 00:45 #31
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html,body {
    height: 100%;
    margin: 0px;
}

div#main {
    height: 100%;
    margin: auto;
    width: 500px;
}

div#inner {
    position: absolute;
    top: 10px;
    bottom: 10px;
    background: yellow;
    width: 500px;
}
</style>
</head>

<body>
  <div id="main">
    <div id="inner">
      Text
    </div>
  </div>
</body>
</html>
Avatar billede Slettet bruger
28. marts 2006 - 00:45 #32
Hov.. Det virker kun i FF.. :/
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:45 #33
sovetid... kig på denne her ... <- det skal virke !!! vi er tæt på :P

<!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>

<script>
window.onload=function(){
if(document.body.clientHeight>100)newheight=document.body.clientHeight-20;
else if(window.innerHeight>100)newheight=window.innerHeight-20;

document.getElementById("inner").style.height=newheight+"px";
document.getElementsByTagName("body").item(0).style.height="auto";

abc1=document.getElementById("inner").scrollHeight;
abc2=document.getElementById("inner").style.height.replace(/[a-zA-Z]/ig,"");
abc3=(abc1-abc2);

if(abc3>0){
document.getElementById("inner").style.height=abc1+"px";

}

}
</script>
</head>

<body style="margin:10px;height:100%;">

<div id="inner" style="margin:0px auto;overflow:auto;width:700px;height:1px;background-color:red;">

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

</div>

</body></html>
Avatar billede mclemens Nybegynder
29. marts 2006 - 09:07 #34
hmmm, man kunne åbenbart alligevel godt sætte height til 100% i firefox, man skulle bare bruge position:absolute; dog giver det stadig probs med de 10 px i margin - der skal bruges <table> som roenving skriver... http://www.eksperten.dk/spm/698180

<!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">

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

#outer{height:100%;width:100%;position:absolute;}
#inner{position:relative;height:100%;width:700px;margin:0px auto;border:0px;}

</style>
</head>
<body>
<div id="outer">


<table id="inner"><tr><td height="10"></td></tr><tr><td style="background-color:black;"><table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr>

<td valign="top" width="200" style="background-color:red;">
venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>
</td>

<td valign="top" style="background-color:green;">
midt
</td>

<td valign="top" style="background-color:blue;"width="200" >
højre
</td>

</tr></table></td></tr><tr><td height="10"></td></td></tr></table>

</div>
</body>
Avatar billede mclemens Nybegynder
29. marts 2006 - 09:35 #35
</html>
Avatar billede fixxxer Nybegynder
02. april 2006 - 19:32 #36
Det giver et underligt resultat i Explorer. Men ellers er den godtaget.
Avatar billede mclemens Nybegynder
02. april 2006 - 19:44 #37
ja, av - den kigger jeg lidt på :P
Avatar billede mclemens Nybegynder
02. april 2006 - 20:21 #38
bedre ?... undgår vist ikke js helt - muligt man kan
men kan ikke lige få den til at makke ret :/

<!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>

<script type="text/JavaScript">

window.onload=ieheightfix;
function ieheightfix(){
document.getElementById("ieheightfix").height=document.getElementById("inner").offsetHeight-20;
}
</script>

<style type="text/css">

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

#outer{height:100%;width:100%;position:absolute;}
#inner{position:relative;height:100%;width:700px;margin:0px auto;border:0px;}

</style>
</head>

<body>
<div id="outer">


<table id="inner" cellpadding="0" cellspacing="0" border="0" ><tr><td height="10"></td></tr><tr><td style="background-color:black;"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" id="ieheightfix" ><tr>

<td valign="top" width="200" style="background-color:red;">
venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>venstre<br>ve<br>venstre<br>venstre<br>venstre<br>
</td>

<td valign="top" style="background-color:green;">
midt
</td>

<td valign="top" style="background-color:blue;"width="200" >
højre
</td>

</tr></table></td></tr><tr><td height="10"></td></tr></table>

</div>
</body>
</html>
Avatar billede fixxxer Nybegynder
10. april 2006 - 21:28 #39
Smid en svar..

Jeg må nok indse at det ikke sådan at lave et design i pæn strict HTML, uden brug af tables.

Men måske en dag, når Internet Explorer vil være helt på linje med andre CSS 2.1 kompatible browsere.
Avatar billede mclemens Nybegynder
10. april 2006 - 21:49 #40
[ Jeg må nok indse at det ikke sådan at lave et design i pæn strict HTML, uden brug af tables. ]
- Nej, ikke med height 100% og variabel margin :/

[ Men måske en dag, når Internet Explorer vil være helt på linje med andre CSS 2.1 kompatible browsere. ]
Forhåbentlig :)
Avatar billede mclemens Nybegynder
10. april 2006 - 21:50 #41
edit [- Nej, ikke med height 100% og variabel margin :/]
-> - Nej, ikke med height 100% og margin :/
Avatar billede mclemens Nybegynder
10. april 2006 - 21:57 #42
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 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
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
White papers
Flere white papers »