Søg
Avatar billede laksen Nybegynder
16. oktober 2003 - 11:36 Der er 14 kommentarer og
1 løsning

Højde på block-element

Jeg har en side, hvor toppen på siden er 117px høj. Nedenunden denne top, skal der være et block-element, således at der kan scrolles i dette. Jeg vil med andre ord have, at siden er den højde, som vinduet er. Problemet er blot, at jeg ikke ved hvor meget, der "er tilbage" efter der er brugt 117px i toppen og derfor ikke kan angive højden på block-elementet rigtigt.

Jeg har prøvet følgende:
div#indhold{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 100%;
  margin-left: -241px;
  border-top: 117px solid #f3f3f1;
  background-color: #fdfffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
Det virker i Mozilla og Netscape men ikke i Explorer. Hvordan kan jeg løse det?

Der må IKKE benyttes tabeller i svaret :)
Avatar billede roenving Novice
16. oktober 2003 - 11:39 #1
Hvordan får du fejl ?-)

-- eller endnu bedre: hvordan ser fejlen ud !-)
Avatar billede laksen Nybegynder
16. oktober 2003 - 11:42 #2
I Explorer bliver vinduet 100% + 117px højt, hvorimod den i Mozilla kun bliver 100% (inkl. de 117 px.) høj.
Avatar billede roenving Novice
16. oktober 2003 - 11:48 #3
Det er fordi IE (fejlagtigt !-) lægger en _udenpå_ elementet, prøv at bruge padding:117px, som virker både i IE og Mozilla !-)
Avatar billede laksen Nybegynder
16. oktober 2003 - 11:53 #4
Det duer heller ikke, da scroll-baren i højre side da kommer til at strække sig over 100% i højden, mens det viste kun strækker sig over 100% - 117px.
Avatar billede roenving Novice
16. oktober 2003 - 11:58 #5
Det gør den sågu ikke hos mig:

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

<head>

<title>Tomt dokument</title>

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#over{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 117px;
  margin-left: -241px;
  background-color: #f3f300;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 2;
}
#indhold{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 100%;
  margin-left: -241px;
  padding-top:117px;
/*  border-top: 117px solid #f3f300;*/
  background-color: #00fffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
</style>
</head>
<body>
<div id="over"></div>
<div id="indhold"></div>
</body>
</html>
'-)
Avatar billede roenving Novice
16. oktober 2003 - 11:59 #6
-- og jeg havde i 11:48:39 fået misset:

... en border udenpå ...
Avatar billede laksen Nybegynder
16. oktober 2003 - 12:07 #7
Se her hvad jeg mener:

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

<head>

<title>Tomt dokument</title>

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#over{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 117px;
  margin-left: -241px;
  background-color: #f3f300;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 2;
}
#indhold{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 100%;
  margin-left: -241px;
  padding-top:117px;
/*  border-top: 117px solid #f3f300;*/
  background-color: #00fffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
</style>
</head>
<body>
<div id="over"></div>
<div id="indhold">
Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang
</div>
</body>
</html>
Avatar billede laksen Nybegynder
16. oktober 2003 - 12:08 #8
Det er scrollbaren i det nederste vindue jeg snakker om....
Avatar billede roenving Novice
16. oktober 2003 - 12:27 #9
Jamen det ser ud til at give underlige effekter (såsom manglende respektering af en padding !-), hvis man ikke scripter sig til det ...

Nedenstående virker i min udgave af Windows/IE6/Mozilla1.5

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

<head>

<title>Tomt dokument</title>

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#over{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 117px;
  margin-left: -241px;
  background-color: #f3f300;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 2;
}
#indhold{
  position: absolute;
  top: 117px;
  left: 50%;
  width: 482px;
/*  height: 100%;*/
  margin-left: -241px;
/*  margin-top:117px;*/
/*  border-top: 117px solid #f3f300;*/
  background-color: #00fffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
</style>
</head>
<body onload="t=(screen.availHeight-240)+'px';alert(screen.availHeight+'\n'+t);document.getElementById('indhold').style.height=t">
<div id="over"></div>
<div id="indhold">
Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang Her skal stå en tekst der er lang
</div>
</body>
</html>
Avatar billede roenving Novice
16. oktober 2003 - 12:28 #10
-- som du kan se på stylesheetet har jeg været noget omkring !-)
Avatar billede laksen Nybegynder
16. oktober 2003 - 12:47 #11
Hvordan får man den til at finde den den indre højde af browservinduet i stedet? Lige nu duer det kun, hvis man har maksimeret sit browservindue.
Avatar billede roenving Novice
16. oktober 2003 - 12:53 #12
document.body.clientHeight i IE4+
window.innerHeight i NS4+ (og vist også Mozilla !-)

-- prøver lige ...
Avatar billede roenving Novice
16. oktober 2003 - 13:02 #13
Denne virker ihvertfald i de tre jeg har til rådighed (IE6, Moz1.5 og webwriteren !-)

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

<head>

<title>Tomt dokument</title>

<script type="text/javascript">
function divHeight(){
var ns = (navigator.userAgent.indexOf('Gecko')>-1)?1:0;
var ie = (navigator.userAgent.indexOf('MSIE')>-1)?1:0;

var t=(ie)?(document.body.clientHeight-117)+'px':(ns)?(window.innerHeight-117)+'px':(screen.availHeight-240)+'px';
alert(screen.availHeight+'\n'+t);
document.getElementById('indhold').style.height=t;
}
</script>

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#over{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 482px;
  height: 117px;
  margin-left: -241px;
  background-color: #f3f300;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 2;
}
#indhold{
  position: absolute;
  top: 117px;
  left: 50%;
  width: 482px;
/*  height: 100%;*/
  margin-left: -241px;
/*  margin-top:117px;*/
/*  border-top: 117px solid #f3f300;*/
  background-color: #00fffe;
  padding: 0px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  z-index: 1;
}
</style>
</head>
<body onload="divHeight()">
<div id="over"></div>
<div id="indhold">
Her skal stå en tekst der er lang, som lige er forkortet her !-)
</div>
</body>
</html>
Avatar billede laksen Nybegynder
16. oktober 2003 - 13:08 #14
Det spiller max! Tak for hjælpen.
Avatar billede roenving Novice
16. oktober 2003 - 13:12 #15
Velbekomme -- og tak 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
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 går 18:50 Slet lokal konto Af ErikHg i Windows
I går 16:05 Ændre tal i en celle Af xvid i Excel
I går 13:47 Dette er ikke en kommerciel session i Windows 11 Af eksmojo i Windows
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
White papers
Flere white papers »