Avatar billede rudi1234 Nybegynder
18. marts 2005 - 16:12 Der er 7 kommentarer

Få DIV til at fylde fra 110px fra top og resten af siden ned

Jeg arbejder med følgende kode. Problemet er at div med id=content skal fylde fra 110px fra toppen (det virker ok) og resten af siden ned, dvs. i princippet 100%-110px (det kan jeg ikke greje hvordan man gør).

Koden er

<html>
<head>
    <style>
        html, body {height:100%;margin:0px;background:white;}
        div#body {
            position:absolute;
            z-index:1;
            top:0px;
            left:50%;
            margin-left:-350px;
            height:100%;
            background:rgb(219,210,155);
            width:700px;
        }
        div#topbar {
            position:absolute;
            z-index:2;
            top:5px;
            left:50%;
            margin-left:-375px;
            height:100px;
            background:blue;
            width:750px;
        }
        div#content {
            position:absolute;
            z-index:2;
            top:110px;
            left:50%;
            margin-left:-250px;
            height:100px;
            background:red;
            width:500px;
        }
    </style>
</head>

<body>
    <div id="topbar">
        Her skal være menu mm.
    </div>
    <div id="content">
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem
    </div>
<div id="body">

</div>


</body>
</html>
Avatar billede Slettet bruger
18. marts 2005 - 17:03 #1
Du har i content sat  height:100px; så kan den ikke blive større du kan sætte den højere f. eks 438 så passer den til det andet eller du kan sætte den til heigtt: auto så følger den indholdet i content
Avatar billede rudi1234 Nybegynder
18. marts 2005 - 17:11 #2
Ups... det var også en fejl.... Men hvis jeg skriver "auto" eller helt fjerner height i content har jeg stadig et problem (egentlig det problem jeg vil have hjælp til - jeg formulerede mig bare ikke ordentligt... :O) ).

Problemet opstår nemlig når teksten fylder mere end der kan vises på skærmen. Så fylder content-DIV-en ud over baggrunds-DIV-en (body).

Som fx ved:

<html>
<head>
    <style>
        html, body {height:100%;margin:0px;background:white;}
        div#body {
            position:absolute;
            z-index:1;
            top:0px;
            left:50%;
            margin-left:-350px;
            height:100%;
            background:rgb(219,210,155);
            width:700px;
        }
        div#topbar {
            position:absolute;
            z-index:2;
            top:5px;
            left:50%;
            margin-left:-375px;
            height:100px;
            background:blue;
            width:750px;
        }
        div#content {
            position:absolute;
            z-index:2;
            top:110px;
            left:50%;
            margin-left:-250px;
            background:red;
            width:500px;
        }
    </style>
</head>

<body>
    <div id="topbar">
        Her skal være menu mm.
    </div>
    <div id="content">
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
        Her skal teksten være... Men DIV-en skal fylde hele vejen ned til bunden. Og ved overflow, skal man kunne scrolle teksten frem<br><br><br>
    </div>
<div id="body">

</div>
Avatar billede olebole Juniormester
18. marts 2005 - 19:06 #3
<ole>

Det er en af de ting, tabel-elementet er rigtig godt til - mens andre elementer skodder voldsomt til netop dette.

I øvrigt er det aldrig fikst at bruge identifiers, der bliver brugt i generiske sammenhænge. Undgå helst ID'er som 'body' ... det er ofte at sætte vand over til øretæver  ;o)

/mvh
</bole>
Avatar billede rudi1234 Nybegynder
18. marts 2005 - 19:23 #4
Jeg har tænkt på det samme - og overvejet at lave det med tabeller. Men det er jo ikke den "rigtige" måde at gøre det på....

Jeg tror i øvrigt jeg nu har forstået mit problem mere præcist: Mit problem er at jeg ikke kan få et nestet DIV til at "udvide" DIV-containeren.

Hvis nu containeren er 100% høj, 500px bred og blå i baggrunden, mens det nestede DIV er fx 300px bred og rødt i baggrunden. Når så det nestede DIV fylder mere i højden end containeren, så ser det forkert ud, idet det røde kører fylder nedad, men det blå følger ikke med...:


<div id="container">
  <div id="nested">
    En f... masse tekst...
  </div>
</div>

Er det rigtigt forstået, Ole, at jeg godt kan opgive at løse problem med DIV?
Avatar billede olebole Juniormester
18. marts 2005 - 22:49 #5
Ja, hvis det nestede div er positioneret absolute, optager det ingen plads i 'container'. Problemet er nu et lidt andet:

<div style="height:100%">
    <div style="height:150px">noget tekst</div>
    <div id="hest">... og noget mere tekst</div>
</div>

Der findes ikke en metode i CSS til at sige: 'height:(100%-150px)' - som er den højde, du gerne vil tildele 'hest'.

Det 'korrekte' i denne forbindelse er at bruge et element, der kan opfylde de krav, man nu engang har ... eller lave om på ens krav.
Det er dårlig kode - og dybt tåbeligt - at fedte rundt med alle mulige kunstfærdige hacks og JavaScripts for at efterligne det element, der er bygget til at udføre en aktuel opgave.

Det er uinteressant, hvad selvbestaltede web-guruer skriver om tabeller. Det er langt mere interssant at opregne fordele og ulemper ved at bruge tabel-elementet i en given situation ... det giver betydelig mere mening.

Fordele ved at benytte en tabel til at opdele siden i to horisontale dele med den ønskede effekt:
1. Du kan bruge en hel simpel kode, alle vil have let ved at vedligeholde
2. Du kan skrive en rimelig slank kode
3. Du slipper for alle mulige sære CSS-hacks
4. Du slipper for at være afhængig af JavaScript til at layout'e

Bagdele ved den samme fremgangsmåde:
... ehhhhh ....... ja, hvad er det nu lige det er, bagdelene er - sådan helt præcist og sagligt?  ;o)
Avatar billede roenving Novice
19. marts 2005 - 07:22 #6
Uden formeget hacking kan denne metode bruges:

<!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;}
#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</div>
<div id="bottom">
<div id="bund1">bund1</div>
<div id="bund2">bund2</div>
</div>
</body>
</html>
Avatar billede rudi1234 Nybegynder
19. marts 2005 - 07:42 #7
Jeg skal lige afprøve roenvings metode når jeg får tid... men ellers vil jeg give olebole ret.
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

Seneste spørgsmål Seneste aktivitet
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging