Avatar billede hoppe11 Nybegynder
26. december 2010 - 14:14 Der er 11 kommentarer

overflow scroll

hey

prøver på at få en overflow med scroll til at fungere, men synes ikke lige den vil som jeg vil..

der kommer en scrollbar til syne, men der er ingen overflow.. dvs hele indholdet af elementet med overflow er synligt selvom det overskrider højden..

<table style="width:100%; height:100%">
    <tr>
        <td id="td_headers" style="height:300px">
           
        </td>
    </tr>
    <tr>
        <td style="height:10px; background:#ff0000; cursor:n-resize"></td>
    </tr>
    <tr>
        <td>
            <div style="overflow-y:scroll; height:100%">
                indhold med scroll
            </div>
        </td>
    </tr>
</table>
Avatar billede webweaver Praktikant
26. december 2010 - 14:30 #1
Prøv at sætte din height med pixels istedet for %.
100% er jo hele indholdet.
Avatar billede hoppe11 Nybegynder
26. december 2010 - 15:09 #2
jamen mit element skal have den fulde højde? :)
Avatar billede webweaver Praktikant
26. december 2010 - 22:22 #3
Prøv lige at skifte det alligevel, bare lige for at se om det rent faktisk er det som er skyld i problemet.
Avatar billede hoppe11 Nybegynder
27. december 2010 - 20:57 #4
ja, det virker når man sætter pixel højde på, men skulle gerne kunne sætte højden af elementet til 100% på en måde :)
Avatar billede webweaver Praktikant
27. december 2010 - 22:06 #5
Sad lige og kiggede på det, og det bør faktisk virke hos dig.
Hvis jeg laver en div med height: 100% og overflow, så kommer scrollbaren som den skal.

Prøv at rette din div til følgende,

<div style="overflow:auto; height:100%">


Gør det nogen forskel? Hvilken browser sidder du I?
Avatar billede hoppe11 Nybegynder
28. december 2010 - 12:51 #6
nu forsvandt scrollbaren helt..

jamen det skal jo gerne virke i hvert fald både i IE og FF
Avatar billede webweaver Praktikant
28. december 2010 - 13:51 #7
Nu forsvandt scrollbaren helt?
Selvom du har indhold der fylder mere end div'en's højde? Hmm.
Avatar billede webweaver Praktikant
28. december 2010 - 13:56 #8
Nu har jeg lige prøvet at lave et eksempel, hvor det virker helt fint.

http://www.lasse-jensen.dk/eksperten/overflow.html

Testet i IE, FF, Chrome og Opera og virker perfekt i dem alle.

Hvis du tager og kopierer det fra min kode over i en tom fil selv, virker det så hos dig?
Avatar billede hoppe11 Nybegynder
28. december 2010 - 15:40 #9
nu skal det jo bruges i en table.. :)

dit eksempel virker, men ikke når det smides i en table hvor det skal bruges

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

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
   
    <style>
        * {
            font-family:tahoma;
            font-size:11px;
            color:#333333;
        }
       
        html {
            height:100%;
        }
       
        body {
            background:#fafbfc;
            margin:0px;
            height:100%;
            overflow-y:scroll;
        }
       
        table {
            border-collapse:collapse;
            border:0px;
        }
       
        td {
            padding:0px;
            vertical-align:top;
        }
       
        .cell {
            padding:2px 6px 3px 6px;
        }
       
        .cell2 {
            padding:5px 10px 5px 10px;
        }
    </style>
   
    <body>
        <table style="width:100%; height:100%">
            <tr>
                <td id="td_folders" style="width:200px; padding:20px">
                   
                </td>
                <td class="cell2">
                    <table style="width:100%; height:100%">
                        <tr>
                            <td id="td_headers" style="height:300px">
                               
                            </td>
                        </tr>
                        <tr>
                            <td style="height:10px; background:#ff0000"></td>
                        </tr>
                        <tr>
                            <td>
                                <div style="overflow:auto; height:100%">
                                    asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
                                    asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
                                    asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
                                    asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
                                    asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
Avatar billede webweaver Praktikant
28. december 2010 - 16:33 #10
Og det skal være en table? Du kan ikke bygge det op i div?

Så ved jeg det ikke ... Måske du kan finde hjælp i denne guide,
http://www.eksperten.dk/guide/1369
Avatar billede hoppe11 Nybegynder
28. december 2010 - 16:43 #11
hvis du ser på mit eksempel er der en kolonne ude i venstre side som skal fylde 100% i højden og ved siden af to celler som hver fylder x% i højden som tilsammen skal være 100%

i hver af de celler (over og under den røde bar) skal indholdet have overflow med en scrollbar og der skal så senere laves noget javascript så man kan justere den røde bar op og ned og dermed justere højden af den oven- og underliggende celle..

ved ikke lige om det umiddelbart er til at lave i divs
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