Søg
Avatar billede nightowl24 Nybegynder
09. august 2004 - 10:51 Der er 8 kommentarer og
1 løsning

Problem med angivning af height: 100% i div felt

Hej

Jeg har besluttet mig efter utallige opfordringer at droppe tables for i stedet at bruge divs, men er allerede stødt på et lille problem.

Nedenstående kode giver mig et problem, hvordan slippes jeg for at der skal scrolles?

<html>
<body style="margin: 0px; height: 100%;">
<div style="position: absolute; top: 0px; left: 0px;background-color: #aaaaaa; width: 100; height: 20px;">1</div>
<div style="position: absolute; top: 20px;height: 100%; background-color: #e3e3e3; width: 100;">2</div>
</body>
</html>

/Nightowl
Avatar billede roenving Novice
09. august 2004 - 11:49 #1
-- ud fra min egen standard-ting til noget sådant, kan det du viser tilpasses sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
#top{position: absolute; top: 0px; left: 0px;background-color: #aaa; width: 100px; height: 20px;z-index:10;}
#main{position: absolute; top: 0px;height: 100%; background-color: #e3e3e3; width: 100px;z-index:1;}
.spacer{position:relative;height:20px;z-index:-1;}
</style>
</head>
<body>
<div id="top">1</div>
<div id="main">
<div class="spacer">Usynligt</div>
2</div>
</body>
</html>
Avatar billede nightowl24 Nybegynder
09. august 2004 - 12:50 #2
Umiddelbart ser det fornuftigt ud, men så satte jeg en iframe ind på denne måde:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
#top{position: absolute; top: 0px; left: 0px;background-color: #aaa; width: 100%; height: 20px;z-index:10;}
#main{position: absolute; top: 0px;height: 100%; background-color: #e3e3e3; width: 100px;z-index:1;}
#content{position: absolute; top: 0px;left: 100px;height: 100%; background-color: #c2c2c2;z-index:1;}
.spacer{position:relative;height:20px;z-index:-1;}
</style>
</head>
<body>
<div id="top">top</div>
<div id="main">
<div class="spacer">Usynligt</div>
menu</div>
<div id="content">
<div class="spacer">Usynligt</div>
<iframe style="height: 100%; width: 100%;"></iframe></div>
</body>
</html>

...og så gik det galt igen, nogen forslag?

/Nightowl
Avatar billede roenving Novice
09. august 2004 - 13:40 #3
Det kan du, såvidt jeg er orienteret ikke komme udenom ...

-- hvis du skal bruge en iframe, skal du helst kende dimensionerne i forvejen, ellers skal du beregne dem onload vha. javascript, men den løsning vil jeg ikke anbefale, da den er følsom, og design-mæssigt er det også umuligt at styre et indhold efter en tilfældig bredde, som man intet kender til !-)

-- men hvis du nu definerer en samlet bredde til dit site, er det jo heller ikke så svært:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;text-align:center;background:#ddd;}
#site{position:relative;width:994px;height:100%;margin:0 auto;text-align:left;}
#top{position: absolute; top: 0px; left: 0px;background-color: #aaa; width: 100%; height: 20px;z-index:10;}
#main{position: absolute; top: 0px;height: 100%; background-color: #e3e3e3; width: 100px;z-index:1;}
#content{position: absolute; top: 0px;left: 100px;height: 100%; background-color: #c2c2c2;z-index:1;}
.spacer{position:relative;height:20px;z-index:-1;}
</style>
</head>
<body>
<div id="site">
<div id="top">top</div>
<div id="main">
<div class="spacer">Usynligt</div>
menu</div>
<div id="content">
<div class="spacer">Usynligt</div>
<iframe style="position:absolute;top:0px;left:0px;height: 100%; width:894px;"></iframe></div>
</div>
</body>
</html>
Avatar billede roenving Novice
09. august 2004 - 13:41 #4
-- du skal så selvfølgelig huske, at der skal være enten en spacer i iframe-dokumentet eller en top-padding !-)
Avatar billede nightowl24 Nybegynder
09. august 2004 - 14:03 #5
Nu har jeg besluttet mig for at droppe iframes. Jeg er dog et problem med det første forslag du gav, hvis du prøver denne kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
#top{position: absolute; top: 0px; left: 0px;background-color: #aaa; width: 100%; height: 20px;z-index:10;}
#main{position: absolute; top: 0px;height: 100%; background-color: #e3e3e3; width: 100px;z-index:1;}
#content{position: absolute; top: 0px;left: 100px;height: 100%; background-color: #c2c2c2;z-index:1;}
.spacer{position:relative;height:20px;z-index:-1;}
</style>
</head>
<body>
<div id="top">top</div>
<div id="main">
<div class="spacer">Usynligt</div>
menu</div>
<div id="content">
<div class="spacer">Usynligt</div>
<%for i=0 to 50%>
test test<p>
<%next%></div>
</body>
</html>

Hvis du ikke har mulighed for at teste asp, så er problemet at når der scrolles følger den venstre bar ikke med ned.

/nightowl
Avatar billede roenving Novice
09. august 2004 - 14:36 #6
Mener du, at menu-diven ikke er lang nok ?-)

To løsningsmuligheder:

Hvis problemet 'bare' er baggrundsfarve e.l. kan du sætte den på body, for de andre dele dækker jo over denne ...

Eller du kan synkronisere højderne onload, f.eks. sådan:

<script type="text/javascript">
var elms = ['main','content'];

function synchronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
</script>
</head>
<body onload="synchronizeDivs()">
Avatar billede nightowl24 Nybegynder
09. august 2004 - 15:39 #7
Det virker fint, smid et svar så du kan få point!
Avatar billede roenving Novice
09. august 2004 - 15:47 #8
Velbekomme '-)
Avatar billede roenving Novice
10. august 2004 - 11:46 #9
-- og tak 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 går 21:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
I går 20:06 email adresse Af Malm i Forslag til ændringer
I går 19:54 problem med google crome Af Malm i Andet software
I går 09:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »