CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

rhjjhj Nybegynder

18. maj 2005 - 12:25 Der er 33 kommentarer og
2 løsninger

height=100% og scroll

Hej. Jeg vil gerne lave et layout i en tabel, der fylder 100% i både højde og bredde. Der er 2 rækker i tabellen, og den første har fast højde (fx 100px). Den næste (og her kommer problemet) skal fylde resten, og hvis indholdet fylder mere end der er plads til på siden, skal der kun scrolles i den række (altså 2. række)!

Måske er det smartere bare at lave dem med div's og css (altså uden tabeller), men det har jeg ikke så godt styr på, så hvis nogen har et løsningsforslag i den retning er jeg også interesseret.

Det er vigtigt at det både fungerer i Internet Explorer og Moxilla Firefox. Og helst også uden problemer i Safari (mac)

--------------------------------------------
Min kode (som ikke virker efter hensigten!!)
--------------------------------------------
<table border=1 height="100%" width="100%">
<tr height="100"><td>1 række</td></tr>
<tr><td><div style="overflow: scroll">En masse indhold!!!</div></td></tr>
</table>
--------------------------------------------

Nogen forslag :o)

Synes godt om

nielle Nybegynder

18. maj 2005 - 12:35 #1

Prøv i stedet med noget bygget over dette:

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

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 12:38 #2

... det fjerner bare den scrollbar, der skal bliver der!!

Synes godt om

nielle Nybegynder

18. maj 2005 - 12:46 #3

"overflow: auto;" skulle da meget gerne bevirke at der kommer scollbars når der er brug for dem og ellers ikke:

http://www.w3schools.com/css/pr_pos_overflow.asp

Synes godt om

plazm Nybegynder

18. maj 2005 - 12:47 #4

nielle du har ikk forstået spørgsmålet.
Han vil ikk fjerne den, han vil bare have scrollbaren i række2

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 12:50 #5

Ja, det kan jeg kune være enig i, men fungerer ikke efter hensigten i min kode!! Problemet er muligvis at den ikke kan finde ud af højden på 100%, og dermed ikke ved hvornår der er overflow!!... hvis du forstår...

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 12:50 #6

plazm: jep :o)

Synes godt om

nielle Nybegynder

18. maj 2005 - 12:57 #7

<table border=1 style="width: 100%; height: 100%;">

<tr style="height: 100px;">
<td>1 række</td>
</tr>
<tr>
<td>
<div style="height: 100%; overflow: scroll;">
En masse indhold!!!
</div>
</td>
</tr>
</table>

Synes godt om

nielle Nybegynder

18. maj 2005 - 12:58 #8

Brug style og husk altid at have enheder på dine tal.

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 13:08 #9

Øhmmm... Det virker ikke efter hensigten!! Hele browservinduet (dvs. også række 1) scroller, når der kommer meget indhold i række 2!

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 13:09 #10

.. det er kun række 2 der skal scrolle! Jeg ved ikke om det ser anderledes ud i Internet Explorer, men det fungerer ikke i Firefox!!

Synes godt om

plazm Nybegynder

18. maj 2005 - 13:33 #11

jeg ved ikke lige hvordan du skal gøre, men jeg har da forsøgt at lave et fusket tweak, dog er det langt fra perfekt og der må findes en bedre løsning derude.

http://plazm.1go.dk/test1.php

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 13:37 #12

Ja, det reagerer lidt mærkeligt, og scrollbaren starter i toppen, men rent funktionelt gør den som den skal. Jeg prøver lige at rode lidt med den.... tak.

Synes godt om

plazm Nybegynder

18. maj 2005 - 13:39 #13

dog synes jeg ikk du skal bruge den, da det ikke er en optimal måde at gøre det på, men hvis det kan hjælpe folk til at se hvad det er du mener så er det da en hjælp.

Synes godt om

nielle Nybegynder

18. maj 2005 - 13:43 #14

Hm? Det fungerer da ellers 100% korrekt her hos mig - men jeg har nu også kun testet med MSIE 6.0.

Synes godt om

nielle Nybegynder

18. maj 2005 - 14:08 #15

Jeg har observeret at der somme tider er forskel på hvad der vises alt efter om man har placeret sin styling i en CSS og bruger class-atributten, eller om man bruger style-attributten. Måske virker nedenstående bedre (dog stadigvæk kun testet med MSIE 6.0):

<html>
<head>
<title>Eksperten</title>
<style>
table.fullpage { width: 100%; height: 100%; }
td.h100px { height: 100px; }
.hrest { height: 100%; overflow: scroll; }
</style>
</head>
<body>

<table border="1" class="fullpage">
<tr>
<td class="h100px">1 række</td>
</tr>
<tr>
<td>
<div class="hrest">
En masse indhold!!!
</div>
</td>
</tr>
</table>

</body>

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 14:20 #16

Det giver desværre samme resultat. Ellers tak...

Synes godt om

rhjjhj Nybegynder

18. maj 2005 - 14:59 #17

plazm: tjaaa... jeg må tilstå at jeg ikke rigtig kan få det til at fungere optimalt. Jeg tillader mig lige at vente og se om der kommer andre forslag...

Synes godt om

plazm Nybegynder

18. maj 2005 - 15:42 #18

hehe, det tænkte jeg nok ;)

Synes godt om

olebole Juniormester

18. maj 2005 - 20:19 #19

<ole>

Prøv at lægge et link til siden, for der er flere ting, der gør, løsningen afhænger af resten af koden.

Generelt kan man dog sige, du selv 'bestiller' en lodret scrollbar. Hvis du sætter en tabel til at være 100% høj - og body'en er f.eks. er 600px høj - vil tabellen blive 600px høj.
Sætter du så yderligere en border på tabellen på 1px, vil den naturligvis blive 602px - og introducere en scrollbar ;o)

Uden en fuld DTD, kan man ikke få CSS til at virke i IE. Den _skal_ indeholde en definitions-URL og kan f.eks. se sådan ud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

nielle >> Dine observationer omkring forskelle mellem CSS-rules, sat i inline-styles og stylesheet, må det bero på fejl og/eller uhensigtsmæssigheder i din kode. Det er der ingen forskel på, hvis koden ellers er korrekt.

/mvh
</bole>

Synes godt om

olebole Juniormester

18. maj 2005 - 20:25 #20

Du kan evt. prøve dette dokument, hvor du kan se, hvordan border lægges til elementers dimensioner, når koden er korrekt:

<!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">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0px;
}
</style>
</head>
<body>

<div style="width:200px;height:200px;border:1px solid blue">
<div id="gnu" style="height:100%;background-color:yellow">En tekst</div>
</div>

<button onclick="document.getElementById('gnu').style.border='50px solid red'">TEST BORDERS</button>

</body>
</html>

- og det er ikke kun borders, der lægges til elementets dimensioner ... det gør dets padding også :)

Synes godt om

nielle Nybegynder

19. maj 2005 - 19:03 #21

Nu har jeg prøvet en snes forskellige varianter. Desværre, uden det store held. :^(

I MSIE går det som en leg - i Firefox synes det nærmest at være en umulighed. Ikke et ondt ord om Firefox i den anledning, men selve problemstillingen synes da at være ret fundamental og burde derfor have en ganske simpel løsning.

olebole> Det er muligt at jeg har gjort noget galt dengang. Det er nu over to år siden, så jeg kan ikke huske de nærmere detaljer. Jeg blev godt nok også selv overrasket, for jeg forventede bestemt da at det forholdte sig som du siger. Imidlertid er der jo stor forskel på "burde gøre" og "gør", og jeg er rimeligt sikker på at jeg observerede noget "meget mystisk". Det kan meget vel være at tingene er meget bedre nu, men mon der ikke stadig er en browser eller to, som ikke gør tingene som den "burde gøre"? Jeg synes at jeg kan huske noget med at det involverede en Mozilla-browser i det aktuelle tilfælde.

Synes godt om

olebole Juniormester

19. maj 2005 - 21:03 #22

nielle >> Jeg bygger ikke min argumentation på, hvad der "burde" ske, men hvad jeg ved om CSS og de forskellige browseres håndtering af det. Jeg har kodet siden NS2.0 og jeg er aldrig stødt ind i problemet ... eller har hørt om andre, der er.
Selv ikke i NS4.X - som ikke havde CSS implementeret - var der forskel på properties, sat i inline-styles og stylesheet.

Ofte ligger der dog små uopdagede fejl og/eller uhensigtsmæssigheder og gemmer sig i koden. De kan være skyld i mange former for uforventet opførsel, som så tolkes som en browser-bug :)

Synes godt om

olebole Juniormester

19. maj 2005 - 21:23 #23

Det aktuelle problem opstår, fordi der ikke explicit kan angives en højde i den nederste tabelrække (eller dens celler). Derfor kan højden på denne rækkes child-elementer heller ikke sættes med en relativ højde - f.eks med: 'height:100%'.

CSS stipulerer desuden, at et element explicit skal have sat en højde, hvis overflow skal give mening på elementet.

Synes godt om

rhjjhj Nybegynder

03. juni 2005 - 10:49 #24

Hej alle 3. Beklager jeg har været væk fra spørgsmålet i lang tid.... meget travlt :o). Jeg endte med at lave designet om, så hele siden scroller. Ærgerligt at der ikke findes en løsning, der er ligetil på så fundamental en ting! Man kan selvfølgelig lave det ved at måle vinduets højde med javascript, og så skrive fast højde på række nr. 2. Jeg har prøvet det nogle gange, men jeg synes bare aldrig det bliver helt godt...

Jeg synes I skal dele pointene. Tak for indsatsen og kommentarerne.

Mvh rhjjhj

Synes godt om

nielle Nybegynder

24. juni 2005 - 17:35 #25

Min 1/3 svar :^)

Synes godt om

plazm Nybegynder

24. juni 2005 - 23:38 #26

Min 1/3 svar :^)

Synes godt om

plazm Nybegynder

25. juni 2005 - 00:00 #27

Nu bragte du selv javascript på banen og jeg fik følgende
http://plazm.1go.dk/test1.php

Synes godt om

plazm Nybegynder

25. juni 2005 - 00:06 #28

okey, det virkede kun i FF, jeg arbejder på at få det lavet til IE

Synes godt om

plazm Nybegynder

25. juni 2005 - 00:11 #29

virker nu også i IE 6, dog ved jeg ikke med andre.

Synes godt om

roenving Novice

25. juni 2005 - 14:18 #30

F.eks.

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

<head>

<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>

</head>

<body>

<div style="position:relative;z-index:10;height:100px;background:#cde">Toppen, som ikke scroller !-)</div>

<div style="position:absolute;height:100%;overflow-x:hidden;overflow-y:auto;overflow:-moz-scrollbars-vertical;;z-index=-1;top:0px;right:0;width:100%;">
<div style="position:relative;height:100px;"> </div>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>
</div>

Synes godt om

plazm Nybegynder

25. juni 2005 - 14:39 #31

roenving, den har vi været forbi i et tidligere forsøg fra mig, men det var ikke optimalt, når scroll ryger bag ved toppen, og jeg ved godt man så kan gøre toppen en scrollbar mindre, men så kommer man alligevel forbi javascript.

Synes godt om

roenving Novice

25. juni 2005 - 14:47 #32

Okay, det havde jeg ikke gennemskuet !-)

-- men ellers er det den eneste stabile mulighed uden regulering af højde med javascript !-)

Synes godt om

plazm Nybegynder

25. juni 2005 - 15:53 #33

Jeps, men du får enten en grim kant, eller også så kan du ikke rulle op igen hvis "siden" bliver meget meget lang.

Synes godt om

nielle Nybegynder

09. juli 2005 - 11:00 #34

Lukketid?

Synes godt om

rhjjhj Nybegynder

09. juli 2005 - 20:23 #35

:o).. mangler fra olebole, men ok.

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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