Div pakt height van andere div.
Danny von Gaal
31/07/2017 22:38:34Helaas kan ik mijn probleem niet weergeven met een voorbeeld omdat het een app is die ik aan het maken ben. Maar ik heb twee aparte div's. Deze div's staan naast elkaar en wanneer op een knop wordt gedrukt schuift de linker div naar links het beeld uit met -1000px en de andere div schuift naar links in beeld.
Mijn probleem is dat de linker div vrij lang is maar de div ernaast krijgt dezelfde lengte. Wanneer de linker div dus naar onder gescrollt is en de rechter schuift in dan is die ook omlaag gescrollt terwijl deze bovenaan moet beginnen. Ongeacht wat er links dan ook is gebeurd.
Height: auto; werkt in dit geval helaas niet :(
Hier mijn html en css van dit gedeelte:
Toevoeging op 01/08/2017 21:45:56:
Ik heb het zelf al opgelost.
Ik heb een nieuwe class in subbody gemaakt genaamd subbody-content en deze position: fixed; meegegeven.
De div die nog niet in beeld is hangt hierdoor op dezelfde hoogte als waar ik ben met scrollen als die naar links in beeld schuift.
Mijn probleem is dat de linker div vrij lang is maar de div ernaast krijgt dezelfde lengte. Wanneer de linker div dus naar onder gescrollt is en de rechter schuift in dan is die ook omlaag gescrollt terwijl deze bovenaan moet beginnen. Ongeacht wat er links dan ook is gebeurd.
Height: auto; werkt in dit geval helaas niet :(
Hier mijn html en css van dit gedeelte:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="page-1">
<div class="subheader">
<h4>Titel</h4>
</div>
<div class="subbody">
Content
</div>
</div>
<div id="page-2">
<div class="subheader">
<h4>Titel</h4>
</div>
<div class="subbody">
Content
</div>
</div>
<div class="subheader">
<h4>Titel</h4>
</div>
<div class="subbody">
Content
</div>
</div>
<div id="page-2">
<div class="subheader">
<h4>Titel</h4>
</div>
<div class="subbody">
Content
</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.subheader {
z-index: 50;
position: fixed;
top: 50px;
height: 35px;
width: 100%;
background-color: #881919;
padding-left: 10px;
color: #fff;
}
.subbody {
position: absolute;
margin-top: 85px;
width: 100%;
padding-bottom: 40px;
}
</style>
.subheader {
z-index: 50;
position: fixed;
top: 50px;
height: 35px;
width: 100%;
background-color: #881919;
padding-left: 10px;
color: #fff;
}
.subbody {
position: absolute;
margin-top: 85px;
width: 100%;
padding-bottom: 40px;
}
</style>
Toevoeging op 01/08/2017 21:45:56:
Ik heb het zelf al opgelost.
Ik heb een nieuwe class in subbody gemaakt genaamd subbody-content en deze position: fixed; meegegeven.
De div die nog niet in beeld is hangt hierdoor op dezelfde hoogte als waar ik ben met scrollen als die naar links in beeld schuift.
Gewijzigd op 31/07/2017 22:38:59 door Danny von Gaal
Er zijn nog geen reacties op dit bericht.