Notifikationer

Markér alle som læst Log ud

moejensen Nybegynder

26. september 2004 - 16:25 Der er 8 kommentarer og
1 løsning

højde på indholds div i laypot med fast top og bund

Jeg har følgende css:

@charset "ISO-8859-1";
@media screen {
body>#top { position:fixed; }
body>#bottom { position:fixed; }
}

html, body {
margin:0px;
}

#top {
width: 760px;
height: 100px;
border: solid black 1px;
position:absolute;
top:5;
left: 50%;
margin-left: -380px;
}
#menu {
position:absolute;
top: 110px;
left: 50%;
margin-left: -380px;
width: 760px;
height: 30px;
background-color: #ffffff;
border: solid black 1px;
}

#main {
position:absolute;
top: 145px;
left: 50%;
margin-left: -380px;
overflow: auto;
padding: 5px;
background-color: #ffffff;
width: 760px;
border: solid black 1px;
}

#bottom {
width: 760px;
height: 20px;
background-color: #ffffff;
border: solid black 1px;
position:absolute;
bottom:0;
left: 50%;
margin-left: -380px;
margin-bottom: 5px;
}

og følgende HTML:

<body background="/Templates/skabelon/bg.jpg">
<div id="top">top</div>
<div id="menu">menu</div>
<div id="main"></div>
<div id="bottom">bund</div>
</body>

Jeg mangler en måde hvorpå min main fylder hele mellemrummet ud mellem menuen og bunden, og hvis indholdet er større, så kommer der scroller på. Jeg kan bare ikke helt få det til at virke.

Synes godt om

-zonic- Nybegynder

26. september 2004 - 16:28 #1

hvis du skal have det til at virke med scroll kun i dit main indhold bliver du nok nødt til at bruge iframe til den slags :)

Synes godt om

roenving Novice

26. september 2004 - 16:33 #2

Se f.eks. http://www.eksperten.dk/spm/520876 og http://www.eksperten.dk/spm/497362

Synes godt om

moejensen Nybegynder

26. september 2004 - 16:37 #3

nej det kan normalt gøres med overflow: auto;, men jeg skal lige have styr på højden.

Synes godt om

moejensen Nybegynder

26. september 2004 - 16:43 #4

roenving --> det ser rigtig godt ud, men når jeg sætter overflow på, så går det lidt galt, for så er scrollen bag nogle af de andre felter i bunden og toppen

Synes godt om

roenving Novice

26. september 2004 - 16:45 #5

Ja, det er rigtigt, men alternativet er at sætte højden via javascript, ved at aflæse vindueshøjden og trække det fra, top og bund fylder onload ...

Synes godt om

moejensen Nybegynder

26. september 2004 - 16:57 #6

okay, hvordan gør jeg det med javascript? og vil det virke i alle browsere?

Synes godt om

roenving Novice

26. september 2004 - 17:13 #7

F.eks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hold højden</title>
<meta name="Generator" content="Stone's WebWriter 4">
<style type="text/css">
html,body {
margin:0px;
padding:0px;
height:100%;
}
#topbar {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
background-color:#24A520;
text-indent: 20px;
font-family: arial, verdana, sans-serif;
color: #FFFFFF;
font-weight:bold;
font-size: 14px;
}
#logobar {
position: relative;
left: 0px;
top: 1px;
width: 100%;
height: 45px;
background-color:#D4D0C8;
text-indent: 20px;
font-family: arial, verdana, sans-serif;
color: #000000;
font-weight:bold;
font-size: 16px;
}
#personalmenubar {
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color:#b1b19f;
text-indent: 20px;
font-family: arial, verdana, sans-serif;
color: #24A520;
font-weight:bold;
font-size: 14px;
}
#rightmenu {
position: relative;
TOP: 3px;
left: 0px;
width:120px;
float: left;
background-color:#D4D0C8;
padding-left: 5px;
font-family: arial, verdana, sans-serif;
color: #000000;
font-weight:none;
font-size: 14px;
}
#content {
position: relative;
top: 3px;
left: 10px;
float:left;
background-color: #FF80C0;
font-family: arial, verdana, sans-serif;
color: #000000;
font-weight:none;
font-size: 14px;
}
#bottombar {
clear:left;
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color:#b1b19f;
}
</style>
<script type="text/javascript">
var divs = ['content','rightmenu'];
var faste = ['topbar','logobar','personalmenubar','bottombar']
function syncronizeDivs(){
document.getElementById('content').style.width = document.body.offsetWidth - 135 + 'px';
var maxH = document.body.offsetHeight ;
d = document.getElementsByTagName("DIV");
for(i=0;d.length>i;i++){
for(j=0;faste.length>j;j++){
if(d[i].id==faste[j])maxH -= d[i].offsetHeight;
}
}
for(i=0;d.length>i;i++){
for(j=0;divs.length>j;j++){
if(d[i].id==divs[j])maxH = Math.max(maxH,d[i].offsetHeight);
}
}
for(i=0;d.length>i;i++){
for(j=0;divs.length>j;j++){
if(d[i].id==divs[j])d[i].style.height=maxH + 'px';
}
}
}
</script>
</head>
<body onload="syncronizeDivs()">
<div id="topbar">
Hold højden
</div>
<div id="logobar">
</div>
<div id="personalmenubar"> 
</div>
<div id="rightmenu">
Menu<br><br>
</div>
<div id="content">
Indhold <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="bottombar"> 
</div>
</body>
</html>

Synes godt om

moejensen Nybegynder

26. september 2004 - 17:49 #8

takker,

jeg har lavet funktionen om til det følgende:

function syncronizeDivs(){
var maxH = document.body.offsetHeight ;
maxH = maxH - 180
document.getElementById('main').style.height = maxH + 'px';
}

og det virker helt pergekt i IE, men i NS og opera der går lidt galt.

Synes godt om

moejensen Nybegynder

08. oktober 2004 - 14:24 #9

lukker

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS