Linker div vast, rechter div horizontaal scrollbaar
Ik ben bezig met het responsive maken van mijn website. Het enige waar ik tegen aanloop is hoe ik 'tabellen' het beste responsive kan maken. Ik wil graag dat het linkerdeel met het onderwerp vast blijft staan, en dat het rechterdeel (statistieken) horizontaal scrollbaar zijn. Op grote schermen is het de bedoeling dat alles wordt getoond indien mogelijk.
Toevallig kwam ik op Google exact tegen hoe ik het wil hebben. Als je daar op de mobiel zoekt op 'Stand Eredivisie' krijg je de stand, waarbij de clubs zichtbaar blijven, en het rechterdeel met doelpunten etc scrollbaar is. In landschapsmodus wordt op mijn mobiel alles weergegeven.
Via de developer functies in de browser kan ik alleen niet achterhalen hoe ze dat nou precies doen. Wil bij Google kennelijk niet. (Edit: Ik zie dat het in Chrome wel kan.) Ik heb zelf wat in elkaar geflanst, maar is dit zoals het zou moeten? Moet ik dus absolute waardes meegeven aan de row en cols om het scollbaar te krijgen? En dan voor elke schermbreedte opgeven? Of kan het ook met percentages?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
</head>
<body>
<style>
.left {width: 50%; float: left; border: 1px solid #F00; box-sizing: border-box;}
.right {width: 50%; overflow: auto; border: 1px solid #FF0; box-sizing: border-box;}
.col {float: left; width: 33%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.col1 {float: left; width: 100px;}
.row {width: 100%; overflow: auto;}
.row1 {width: 900px; border: 1px solid #F93; overflow: auto;}
</style>
<div class='container'>
<div class='left'>
<div class='row'>
<div class='col'>1</div>
<div class='col'>Jan Janssen</div>
<div class='col'>30</div>
</div>
<div class='row'>
<div class='col'>2</div>
<div class='col'>Henk Henken</div>
<div class='col'>24</div>
</div>
<div class='row'>
<div class='col'>3</div>
<div class='col'>Piet Pietersen</div>
<div class='col'>20</div>
</div>
</div>
<div class='right'>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
</div>
</div>
</body>
</html>
<head>
</head>
<body>
<style>
.left {width: 50%; float: left; border: 1px solid #F00; box-sizing: border-box;}
.right {width: 50%; overflow: auto; border: 1px solid #FF0; box-sizing: border-box;}
.col {float: left; width: 33%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.col1 {float: left; width: 100px;}
.row {width: 100%; overflow: auto;}
.row1 {width: 900px; border: 1px solid #F93; overflow: auto;}
</style>
<div class='container'>
<div class='left'>
<div class='row'>
<div class='col'>1</div>
<div class='col'>Jan Janssen</div>
<div class='col'>30</div>
</div>
<div class='row'>
<div class='col'>2</div>
<div class='col'>Henk Henken</div>
<div class='col'>24</div>
</div>
<div class='row'>
<div class='col'>3</div>
<div class='col'>Piet Pietersen</div>
<div class='col'>20</div>
</div>
</div>
<div class='right'>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
<div class='row1'>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
<div class='col1'>10</div>
<div class='col1'>12</div>
<div class='col1'>18</div>
</div>
</div>
</div>
</body>
</html>
Gewijzigd op 05/04/2019 12:09:17 door G Jansma
Wat je natuurlijk ook kan doen is een container maken met een relatieve positionering, en vervolgens waar nodig de inhoud absoluut positioneren.
Het enige wat ik waarschijnlijk zou veranderen is de overflow. Ik zou daar misschien overflow-x: auto en overflow-y: hidden van maken. Maar als dit werkt, waarom niet? Ook kun je je misschien afvragen of die widths wel hout snijden (50% van wat?).
Hierdoor wordt er continue gekeken naar wat de breedte en hoogte is van je browser-viewport.