Søg
Avatar billede bukselak Nybegynder
17. august 2004 - 13:08 Der er 12 kommentarer og
1 løsning

ingen tabeller + fuld højde med scroll i indholdsruden

Hej!

Jeg er ved at lave en CSS-skabelon, hvor jeg ikke benytter tabeller. Se http://d1102868.u38.surftown.dk/. Jeg vil gerne have scroll i inholdsruden, og sidefoden skal forblive nederst når man gør browservinduet mindre og scroller. Jeg har ledt mange steder på internettet, men synes ikke rigtigt der er nogen ideel løsning. Håber nogle af jer lægger inde med svaret.

Mvh Asger
Avatar billede roenving Novice
17. august 2004 - 13:31 #1
Sådan ?-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
    "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
  <title>Fuld højde simpelt</title>
  <meta name="Generator" content="Stone's WebWriter 4">
  <meta name="keywords" content="roenving,http://www.eksperten.dk/spm/497362">
  <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:125px;width:100%;background:yellow;z-index:1;}
    #top1{width:100%;height:50px;background:#770;}
    #top2{width:100%;height:75px;background:#707;}
    #main{height:100%;background:green;overflow:auto;}
    #spacer{height:125px;}
    #bottom{position:absolute;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
    #bund1{width:100%;height:25px;background:#770;}
    #bund2{width:100%;height:100px;background:#707;}
  </style>
</head>
<body>
  <div id="banner">
    <div id="top1">top1</div>
    <div id="top2">top2</div>
  </div>
  <div id="main">
    <div id="spacer">Usynligt</div>
    Hovedside
    <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>XXXX
    <div id="spacer">Usynligt</div>
  </div>
  <div id="bottom">
    <div id="bund1">bund1</div>
    <div id="bund2">bund2</div>
    </div>
</body>
</html>
Avatar billede bukselak Nybegynder
17. august 2004 - 13:48 #2
Det ser ud til at virke meget fint, men hvor bliver scrollbarens på af?
Avatar billede bukselak Nybegynder
17. august 2004 - 13:54 #3
Scrollbaren er udenfor #main. Jeg vil gerne have den til at være indeni - Kan det ikke lade sig gøre...
Avatar billede roenving Novice
17. august 2004 - 13:59 #4
Desværre kan du ikke lave den slags med css alene, hvis du vil have noget sådant, skal vi over i javascript og beregne den plads, som er til rådighed onload ...
Avatar billede bukselak Nybegynder
17. august 2004 - 14:01 #5
Ok - er det noget du kan hjælpe mig med? Jeg tror det er det jeg er ude efter, hvis du mener det fungerer optimalt..
Avatar billede roenving Novice
17. august 2004 - 14:32 #6
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
    "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
  <title>Fuld højde simpelt</title>
  <meta name="Generator" content="Stone's WebWriter 4">
  <meta name="keywords" content="roenving,http://www.eksperten.dk/spm/497362">
  <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:relative;height:125px;width:100%;background:yellow;z-index:1;}
    #top1{width:100%;height:50px;background:#770;}
    #top2{width:100%;height:75px;background:#707;}
    #main{height:100%;background:green;overflow:auto;}
    #spacer{height:125px;}
    #bottom{position:relative;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
    #bund1{width:100%;height:25px;background:#770;}
    #bund2{width:100%;height:100px;background:#707;}
  </style>
  <script type="text/javascript">
    var spacers = ['banner','bottom'],res="";
    function resizeMain(){
      var h = document.getElementById('main').offsetHeight;
      res += h + "\n";
      for(i=0;spacers.length>i;i++){
        h -= document.getElementById(spacers[i]).offsetHeight;
        res += document.getElementById(spacers[i]).offsetHeight + "\n";
      }
      document.getElementById('main').style.height = h + 'px';
      alert(res + h);
    }
  </script>
</head>
<body onload="resizeMain();">
  <div id="banner">
    <div id="top1">top1</div>
    <div id="top2">top2</div>
  </div>
  <div id="main">
    Hovedside
    <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>XXXX
  </div>
  <div id="bottom">
    <div id="bund1">bund1</div>
    <div id="bund2">bund2</div>
    </div>
</body>
</html>
Avatar billede bukselak Nybegynder
17. august 2004 - 14:57 #7
Jeg tror det virker nu :) Men jeg prøvede at tilføje scriptet til onrezise, men så fucker det helt op, hmm!
Avatar billede roenving Novice
17. august 2004 - 15:13 #8
Jepz, for jeg måtte lave en lille cowboy, men problemet er, at man ikke i IE kan aflæse den indre højde af et browser-vindue ...

-- og jeg prøvede lige forskellige tricks, men ingen af dem virkede ordentligt, det nærmeste var at sætte en reload på, hvis man resizede, men så skulle der være en forsinkelse, og så kunne den alligevel ikke gøre det helt præcist !-)

-- men nu tror jeg så også, at de fleste tager det med at resize vinduer alt for alvorligt, for hvornår har du sidst selv resizet et vindue, mens du surfede almindeligt ?-)

-- jeg tror kun at jeg gør det, hvis jeg skal se på forskellen mellem to sider, og så er det i min udvikler-egenskab !-)
Avatar billede bukselak Nybegynder
17. august 2004 - 15:28 #9
Du har nok ret mht. til at folk ikke resizer alt for meget... Det eneste jeg er bekymret for er minimering/maksimering, som jeg tror folk bruger lidt mere... Jeg laver en Refresh for en sikkerhedsskyld...

Mange tak for hjælpen... Pointene er dine!
Avatar billede roenving Novice
17. august 2004 - 15:32 #10
Velbekomme '-)
Avatar billede roenving Novice
17. august 2004 - 15:42 #11
-- og tak for point ;~}
Avatar billede roenving Novice
17. august 2004 - 15:43 #12
-- og du kan da se mit eksperiment, som næsten fungerede:

  <script type="text/javascript">
    var spacers = ['banner','bottom'],res="";
    function resizeMain(){
      var h = document.getElementById('main').offsetHeight;
      res += h + "\n";
      for(i=0;spacers.length>i;i++){
        h -= document.getElementById(spacers[i]).offsetHeight;
        res += document.getElementById(spacers[i]).offsetHeight + "\n";
      }
      document.getElementById('main').style.height = h + 'px';
      //alert(res + h);
      setTimeout('setOnresize()',10);
    }
    function setOnresize(){
      window.onresize = function(){location.reload(false);};
    }
  </script>
Avatar billede bukselak Nybegynder
17. august 2004 - 15:46 #13
Jeg fandt det her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
function redraw() {
var width = document.all ? document.body.clientWidth : window.innerWidth;
var height = document.all ? document.body.clientHeight : window.innerHeight;
document.getElementById('div1').style.width = width;
document.getElementById('div1').style.height =
Math.ceil(height* height/(screen.availHeight - 50));
document.getElementById('div2').style.width = width;
document.getElementById('div2').style.height =
height - Math.ceil(height* height/(screen.availHeight - 50));
}
//-->
</script>
</head>
<body onload="redraw()" onresize="redraw()"
topmargin="0" bottommargin="0"
leftmargin="0" rightmargin="0"
marginwidth="0" marginheight="0">
<div id="div1" style="background-color: black">hi</div>
<div id="div2" style="background-color: yellow">hi again</div>
</body>
</html>

Måske det kan bruges!
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
IT-JOB
Seneste spørgsmål Seneste aktivitet
I dag 20:06 email adresse Af Malm i Forslag til ændringer
I dag 19:54 problem med google crome Af Malm i Andet software
I dag 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
20/0814:16 installere windows på separat diskpartition Af Malm i Windows
White papers
Flere white papers »