Avatar billede goose Nybegynder
04. juli 2005 - 22:38 Der er 14 kommentarer og
1 løsning

Udregning af sidehøjde

Jeg har en html tabel som består af 3 rækker.

Den øverste række har en højde på 150 pixels.

Den nederste række har en højde på på 80 pixels.

Hvordan regner jeg ud hvor høj den midterste række er ud fra brugeres skærmopløsning ?

Jeg skal bruge det i forbindelse med noget overflow af den midterste række som jeg gerne vil have til at fylde så meget som muligt inden der kommer scrollbar

Jeg går ud fra det kan/skal løses med javascript, derfor er den oprettet her.

/Goose
Avatar billede softspot Forsker
04. juli 2005 - 23:51 #1
Kan det her eksempel bruges til noget (jeg har set det fungere i IE 6.0 og FF 1.0)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

<html>
  <head>
    <title>testForm</title>
    <script type="text/javascript">
        function getHeight()
        {
            alert(document.getElementById("middleRow").offsetHeight);
        }
    </script>
  </head>
  <body onload="getHeight();">
   
    <table height="100%" width="100%" style="width:100%;height:100%;" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td height="100px" bgcolor="red">&nbsp;</td>
        </tr>
        <tr>
            <td id="middleRow">&nbsp;</td>
        </tr>
        <tr>
            <td height="20px" bgcolor="blue">&nbsp;</td>
        </tr>
    </table>
   
  </body>
</html>
Avatar billede goose Nybegynder
05. juli 2005 - 00:41 #2
softspot >> nej, det dur ikke rigtigt, jeg vil gerne opnå, at den øverste og nederste række forbliver stående så jeg kun har scroll i den midterste række.

/Goose
Avatar billede roenving Novice
05. juli 2005 - 12:25 #3
F.eks.

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

<head>

<title>Tomt dokument</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
function resizeFlex(){
  var winHeight = window.innerHeight ? window.innerHeight : window.documentElement ? window.documentElement.offsetHeight : document.body.offsetHeight;
  document.getElementById('flexRow').style.height = winHeight - 230 + 'px';
}
window.onload = resizeFlex;
window.onresize = resizeFlex;
</script>
</head>
<body>
<table style="width:100%;height:100%;border-collapse:collapse;">
  <tr style="height:150px;">
    <td style="border:0;padding:0;background-color:#ddd;">Banner og menu</td>
  </tr>
  <tr id="flexRow" style="height:500px;">
    <td style="border:0;padding:0;background-color:#eee;">Indhold</td>
  </tr>
  <tr style="height:80px;">
    <td style="border:0;padding:0;background-color:#ccc;">Footer</td>
  </tr>
</body>

</html>
Avatar billede roenving Novice
05. juli 2005 - 12:26 #4
-- og så skal du som i det andet spørgsmål have en div indeni, hvis du vil kontrollere, at højden ikke bliver større !-)
Avatar billede goose Nybegynder
05. juli 2005 - 12:33 #5
ja men hvordan skal den div se ud, højden skal vel hentes fra javascriptet på en eller anden måde ?

Jeg har ikke et klap forstand på javascript :o)

/Goose
Avatar billede roenving Novice
05. juli 2005 - 12:41 #6
Næh, det skulle der ikke være problemer med:

Bare en div med disse style-properties:

style="height:100%;overflow:auto;"

-- hvis du bruger en fuldt kvalificeret doctype inklusive dtd-link, skulle selv IE kunne fange ideen !-)
Avatar billede goose Nybegynder
05. juli 2005 - 13:34 #7
Ja, men IE er åbenbart også den eneste der fanger det, det virker ikke i Firefox, NN og Opera :o(

/Goose
Avatar billede goose Nybegynder
05. juli 2005 - 13:34 #8
Avatar billede roenving Novice
05. juli 2005 - 13:42 #9
Kan være du skal tilføje style="height:100%" på td'en udenom div'en !-)
Avatar billede roenving Novice
05. juli 2005 - 13:43 #10
-- eller flytte id="flexRow" style="height:500px;" til td'en ...
Avatar billede goose Nybegynder
05. juli 2005 - 13:52 #11
COOL - smid et svar roenving, du er dagens mand i skysovs :o)

/Goose
Avatar billede roenving Novice
05. juli 2005 - 13:53 #12
Velbekomme '-)
Avatar billede goose Nybegynder
05. juli 2005 - 14:03 #13
Kan du ikke lige forklare mig hvorfor det lige er 500px i denne sætning:

id="flexRow" style="height:500px;

Tak for hjælpen

/Goose
Avatar billede roenving Novice
05. juli 2005 - 14:06 #14
For at rækken kan have en indledende højde, som er nogenlunde i nærheden af, hvad vi kan forvente den faktisk ender med, så der ikke sker en voldsom ændring af det viste onload !-)

-- og tak for point ;}
Avatar billede goose Nybegynder
05. juli 2005 - 14:18 #15
tak for det - jeg undrede mig bare :o)

/Goose
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