Avatar billede martins Nybegynder
06. juni 2004 - 11:29 Der er 45 kommentarer og
3 løsninger

100% height problem

Hey eksperter.

Jeg er ved at opbygge en side, og er nu rendt ind i et problem. Jeg vil gerne have at siden altid fylder 100% af højden på brugerens skærm. Problemet er nu, at siden ignorerer de højder jeg har sat på tabellerne, og tildeler nogle andre.

Her er koden:

default.asp:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="pages/includes/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body class='body'>
<table cellpadding="0" cellspacing="0" class='site_body'>
  <tr>
    <td colspan="3" style='height:50px;width:950px;'><a name='top' href='.'><img src="gfx/header.gif" name='header' id='header' style='border:0px;' /></a></td>
  </tr>
  <tr>
    <td rowspan="2" style='height:176px;width:770px;'><img src="gfx/top_photo.jpg" name='top_photo' id='top_photo' style='border:0px;' /></td>
    <td style='width:180px;height:1px;'></td>
    <td rowspan="2" style='width:1px;vertical-align:top;height:175px;'></td>
  </tr>
  <tr>
    <td style='width:179px;vertical-align:top;background:#CFD2D7;height:175px;'>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" style='width:950px;vertical-align:top;'>
   
    <table style='width:950px;height:100%;border:0px;' cellspacing="0" cellpadding="0">
      <tr>
        <td style='width:1px;'></td>
        <td style='width:165px;background:#CFD2D7;'>&nbsp;</td>
        <td style='width:2px;background-image:url(gfx/dots_left.gif);'></td>
        <td style='width:600px;'>&nbsp;</td>
        <td style='width:2px;background-image:url(gfx/dots_right.gif);'></td>
        <td style='width:179px;background:#CFD2D7;'>&nbsp;</td>
        <td style='width:1px;'></td>
      </tr>
    </table>
   
    </td>
  </tr>
</table>
</body>
</html>

stylesheet.css:

.site_body {
    width:952px;
    height:100%;
    border:0px;
    background-color: #FFFFFF;
    border-left: 1px solid #232F43;
    border-right: 1px solid #232F43;
}

.body,html {
    background-image:url(../../gfx/bg.gif);
    margin:0px;
    padding:0px;
    text-align:center;
    height:100%;
}

Hvad dælen gør jeg forkert ?
Avatar billede mjl Nybegynder
06. juni 2004 - 12:25 #1
prøv at bruge denne body:

<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
Avatar billede mjl Nybegynder
06. juni 2004 - 12:29 #2
Sorry - glem det igen...

Når jeg går din kode efter, ser det temmeligt underligt ud - måske skulle du rydde lidt op i koden, for overskuelighedens skyld.

Hvad er problemet mere præsist?
Avatar billede martins Nybegynder
06. juni 2004 - 12:40 #3
Rydde op i koden, jamen den er da ret simpel. Desuden er jeg ret tidligt i stadiet, så det eneste jeg er interesseret i, er at vide om det kan lade sig gøre. Hvis ikke, gider jeg ikke bruge mere tid på det.

Problemet er, at min side godt nok fylder 100% af højden, men de steder hvor jeg så angiver en højde i px bliver ignoreret. Så derfor så er min top pludselig midt på siden...
Avatar billede mjl Nybegynder
06. juni 2004 - 12:41 #4
2 sek.
Avatar billede mjl Nybegynder
06. juni 2004 - 12:43 #5
Prøv lige at sætte denne kode op og køre i din browser...

<html>
<body bottommargin="0" rightmargin="0" leftmargin="0" topmargin="0">

<table border=1 width=952 height=100% cellpadding="0" cellspacing="0">
<tr>
<td width=952 height=50 colspan=2>ccc</td>
</tr>
<tr>
<td width=50% height=100%>ccc</td>
<td width=50% height=100%>ccc</td>
</tr>
<tr>
<td width=952 height=50 colspan=2>ccc</td>
</tr>
</table>

</body>
</html>
Avatar billede mjl Nybegynder
06. juni 2004 - 12:44 #6
Kan du ikke arb. videre ud fra dette - måske?
Avatar billede martins Nybegynder
06. juni 2004 - 12:47 #7
prøver lige :-)
Avatar billede martins Nybegynder
06. juni 2004 - 12:52 #8
Dit eksempel ser fint nok ud... men lige så snart jeg angiver højde og bredde med css, så fucker det... du kan evt. se her: http://msorensen.adsl.dk/tm/
Avatar billede mjl Nybegynder
06. juni 2004 - 12:54 #9
Kan du så ikke angive h og b på min måde?
Avatar billede mjl Nybegynder
06. juni 2004 - 12:55 #10
Table's skal styres hårfint, ellers går de amok - hvis ikke man hele tiden har højder og bredder under kontrol, vælter hele billedet...!
Avatar billede mjl Nybegynder
06. juni 2004 - 13:01 #11
Du har en masse fejl i koden, der får siden til at "flippe" - kunne du måske "tegne", tabellen, så kan jeg måske fornemme, hvordan den skal se ud...
Avatar billede martins Nybegynder
06. juni 2004 - 13:08 #12
|---------------------------------------|
|----------------------------|----------|
|                            |          |
|--------|-------------------|----------|
|        |                  |          |
|        |                  |          |
|        |                  |          |
|        |                  |          |
|        |                  |          |
|        |                  |          |

Sådan :-)

Men vil du ikke udpege nogle af de fejl du mener der er, for jeg kan umiddelbart ikke se nogen.
Avatar billede martins Nybegynder
06. juni 2004 - 13:09 #13
Argh... det ser vist ikke helt godt ud. Prøv lige en anden måde så.
Avatar billede martins Nybegynder
06. juni 2004 - 13:12 #14
Avatar billede mjl Nybegynder
06. juni 2004 - 13:16 #15
2 sek.
Avatar billede mjl Nybegynder
06. juni 2004 - 13:21 #16
<table border=1 width=952 height=100% cellpadding="0" cellspacing="0">
<tr>
<td width=952 height=50 colspan=3>ccc</td>
</tr>
<tr>
<td rowspan=2 width=770 height=176>1</td>
<td width=180 height=1>2</td>
<td rowspan=2 width=1 height=176>3</td>
</tr>
<tr>
<td width=180 height=175>5</td>
</tr>
<tr>
<td width=952 height=100% colspan=3>ccc</td>
</tr>
</table>
Avatar billede martins Nybegynder
06. juni 2004 - 13:23 #17
Vil du ikke være sød at forklare forskellen på din løsning, og forskellen på den jeg har brugt ? :)
Avatar billede mjl Nybegynder
06. juni 2004 - 13:24 #18
Tja - godt sp. - jeg har bare "styr" på højder og bredder på en mere overskuelig måde, måske - men hvad skal du med de <td>'er på 1 px. bredde/højde?
Avatar billede martins Nybegynder
06. juni 2004 - 13:28 #19
table cellpadding="0" cellspacing="0" class='site_body'>
  <tr>
    <td colspan="3" style='height:50px;width:950px;'>C</td>
  </tr>
  <tr>
    <td rowspan="2" style='height:176px;width:770px;'>Ctd>
    <td style='width:180px;height:1px;'></td>
    <td rowspan="2" style='width:1px;vertical-align:top;height:175px;'></td>
  </tr>
  <tr>
    <td style='width:179px;vertical-align:top;background:#CFD2D7;height:175px;'>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" style='width:950px;vertical-align:top;'>C</td>
  </tr>
</table>

Du må altså undskylde, men jeg kan ikke se hvor der ikke er styr på højde og bredde i min kode... De td'er på 1px bredde er bare en hurtig måde til at lave en afstand på... ved godt det ikke er optimalt, men det er hurtigt.
Avatar billede mjl Nybegynder
06. juni 2004 - 13:30 #20
Jamen dette er også ok!

<html>
<body bottommargin="0" rightmargin="0" leftmargin="0" topmargin="0">

<table border=1 width=952 height=100% cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" style='height:50px;width:950px;'>C</td>
  </tr>
  <tr>
    <td rowspan="2" style='height:176px;width:770px;'>Ctd>
    <td style='width:180px;height:1px;'></td>
    <td rowspan="2" style='width:1px;vertical-align:top;height:175px;'></td>
  </tr>
  <tr>
    <td style='width:179px;vertical-align:top;background:#CFD2D7;height:175px;'>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" style='width:950px;vertical-align:top;'>C</td>
  </tr>
</table>

</body>
</html>
Avatar billede mjl Nybegynder
06. juni 2004 - 13:31 #21
Dette er UDEN din body-kode fætter...
Avatar billede martins Nybegynder
06. juni 2004 - 14:02 #22
Jeps. Det kan godt være jeg bare er mega n00b, men jeg kan simpelthen ikke få det til at fungere.
Avatar billede mjl Nybegynder
06. juni 2004 - 14:12 #23
Tja - ok - har du brugt HTML / CSS længe?
Avatar billede martins Nybegynder
06. juni 2004 - 14:19 #24
Ja til dels... og jeg mistænker faktisk at det er når man sætter height:100% på bodyen, at det går galt.
Avatar billede mjl Nybegynder
06. juni 2004 - 14:25 #25
Ja - det tror jeg også!
Avatar billede mjl Nybegynder
06. juni 2004 - 14:27 #26
...dit virker jo også, som jeg skrev, UDEN din body-class!
Avatar billede martins Nybegynder
06. juni 2004 - 14:36 #27
Det synes jeg nu ikke det gør... øjeblik, så forsøger jeg lige igen.
Avatar billede martins Nybegynder
06. juni 2004 - 14:38 #28
Det gør det altså ikke i min browser... se her:
http://msorensen.adsl.dk/tm/test.asp
Avatar billede mjl Nybegynder
06. juni 2004 - 14:41 #29
Hvilken browser bruger du?
Avatar billede martins Nybegynder
06. juni 2004 - 14:41 #30
IE 6.0
Avatar billede mjl Nybegynder
06. juni 2004 - 14:42 #31
Dette virker - sæt det i et dok. alene, uden andet!

<html>
<body bottommargin="0" rightmargin="0" leftmargin="0" topmargin="0">

<table border=1 width=952 height=100% cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" style='height:50px;width:950px;'>C</td>
  </tr>
  <tr>
    <td rowspan="2" style='height:176px;width:770px;'>Ctd>
    <td style='width:180px;height:1px;'></td>
    <td rowspan="2" style='width:1px;vertical-align:top;height:175px;'></td>
  </tr>
  <tr>
    <td style='width:179px;vertical-align:top;background:#CFD2D7;height:175px;'>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" style='width:950px;vertical-align:top;'>C</td>
  </tr>
</table>

</body>
</html>
Avatar billede martins Nybegynder
06. juni 2004 - 15:03 #32
Jamen jeg kan ikke bruge det til noget, hvis ikke jeg kan validere det efter xhtml 1.1... jeg prøver lige.
Avatar billede martins Nybegynder
06. juni 2004 - 15:09 #33
Og det fungerer ikke hvis jeg indsætter min dtd
Avatar billede martins Nybegynder
06. juni 2004 - 15:10 #34
Jeg lader lige spørgsmålet løbe lidt mere.. men du skal nok få point for at have brugt tid.
Avatar billede mjl Nybegynder
06. juni 2004 - 15:34 #35
Er det en opgave?
Avatar billede roenving Novice
06. juni 2004 - 15:39 #36
Måske kan du bruge dette som inspíration, det er godt 4.01 transitional, men der er vist kun nogle metatags, som skal konverteres:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fuld højde simpelt med tabel</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/488278">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:120px;width:100%;background:yellow;z-index:10;}
#baggrund{position:absolute;width:100%;height:100%;background:white;z-index:0;}
#menubag{position:relative;height:100%;width:175px;float:left;background:blue;}
#newsbag{position:relative;height:100%;width:150px;float:left;background:green;}
#rightbag{position:relative;height:100%;width:175px;float:right;background:red;}
#main{position:absolute;width:100%;height:100%;background:transparent;}
#spacer{height:120px;}
table{border:0px;border-collapse:collapse;}
td{margin:0px;border:0px;padding:0px;text-align:center;}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="baggrund">
<div id="rightbag"></div>
<div id="menubag"></div>
<div id="newsbag"></div></div>
<div id="main">
<div id="spacer">Usynligt</div>
<table style="width:100%">
  <tr>
    <td style="width:175px">Menuen</td>
    <td style="width:150px">News</td>
    <td>Hovedside</td>
    <td style="width:175px">Right-bar</td>
  </tr>
</table>

</div>
</body>
</html>
Avatar billede knudgert Nybegynder
06. juni 2004 - 22:45 #37
Hmm...
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">

Er noget vrøvl.
xhtml 1.1 findes kun som en type, men man bør ikke bruge xhtml 1.1 endnu mna bør holde sig til xhtml 1.0, helst i scrict eller transistional.

Og til mjl, det er meget dårlig kode du poster, meget af det er ikke valid (x)html.
Avatar billede mjl Nybegynder
07. juni 2004 - 17:22 #38
Det er jeg klar over - knudgert - mine poster, skulle give en ide' - det er jo vigtigt, at man "styrer" størrelserne på de forskellige dele af tabellen - og at man ikke bruger f.eks. <td width=1 som afstand m.v. - den endelige kode, burde se meget anderledes ud. end det han indtil nu har lavet!
Avatar billede martins Nybegynder
07. juni 2004 - 21:21 #39
Knudgert... så meget er jeg ikke inde i det, jeg ville bare prøve 1.1 da det for mig at se var den nyeste version. Hvis min kode er dårlig, forstår jeg ikke at det validerer uden fejl som xhtml 1.1 ?
Avatar billede roenving Novice
07. juni 2004 - 21:29 #40
Det lyder zq mærkeligt:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

-- som du kan se er den enest mulige xhtml 1.1'er denne:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Avatar billede knudgert Nybegynder
07. juni 2004 - 23:48 #41
>martins
Det er lige netop fordi, xhtml 1.1 er den nyeste, at det giver problemer, hvis den skal følges.
Brug xhtml 1.0 og så gerne strict.
I http://eksperten.dk/spm/506711 har jeg givet en længere forklaring på, hvorfor man ikke bør bruge xhtml 1.1 endnu.
Avatar billede dan_n Nybegynder
08. juni 2004 - 00:01 #42
Avatar billede dan_n Nybegynder
08. juni 2004 - 00:09 #43
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>

<body>
<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>
Avatar billede dan_n Nybegynder
08. juni 2004 - 00:11 #44
Eksemplet herovre  er valid XHTML 1.0 Strict!
og se tilmed ens ud i IE 6, firefox 0,8, Opera 5 og Netscape 6.

Håber det kan bruges
Avatar billede roenving Novice
08. juni 2004 - 00:14 #45
-- bortset fra at Mozilla korrekt lægger border til højden, så der er scrollbar ...
Avatar billede martins Nybegynder
12. juni 2004 - 08:48 #46
Dan_n jeg er ikke meget for at bruge divs til at opbygge min side. Men det er helt rigtigt, at min kode næsten fungerer, hvis jeg bruger 1.0 strict... derfor vil jeg gerne dele point mellem dig og mjl, er det ok for jer begge ?
Avatar billede mjl Nybegynder
12. juni 2004 - 09:13 #47
Ja da...
Avatar billede dan_n Nybegynder
20. juni 2004 - 14:12 #48
Jeg takker for points
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