Door
Lord Gaga
op 13-07-2015 15:19
gewijzigd op 13-07-2015 15:20
4.948 views
Hallo,
Op dit moment heb ik een div van 100% breed. Wat ik nu wil is dat wanneer de browser 1000px of breder wordt, de div 1000px wordt. Dit doe ik met het volgende stukje CSS:
Het probleem is, wanneer er een verticale scrollbar aanwezig is op de pagina, dan past de div van 1000px natuurlijk niet op een pagina van 1000px en dus vormt zich een horizontale scrollbar.
Ik heb voor mijn gevoel het hele internet afgezocht maar kan geen enkele (goede) oplossing vinden voor dit probleem. Hebben jullie misschien een idee hoe ik dit fatsoenlijk kan oplossen?
Nee, het probleem is dat wanneer je je browser resized tot een breedte van 1000 pixels, een div van 1000 pixels een horizontale scrollbar veroorzaakt wanneer er een verticale scrollbar aanwezig is. Ik ben op zoek naar een oplossing waarbij dit niet gebeurd. Het verbergen van de horizontale scrollbar heeft niet veel zin, omdat de div van 1000 pixels dan alsnog aan de rechterkant wordt afgekapt door de verticale scrollbar.
Al geprobeerd om de width met procenten te doen?
Of zet anders even een screenshot van het probleem hier in dit topic, dan snappen we hopelijk beter wat je bedoeld.
De div global-container is 100% breed. Wanneer de body een breedte bereikt van minimaal 1000 pixels, wordt global-container ook 1000 pixels, en wordt deze gecentreerd. (Dit d.m.v. die media query)
Het probleem is echter de verticale scrollbar die zich soms voordoet in de body.
De media query zal zeggen dat de body nog steeds 1000 pixels is, wat er in resulteert dat global-container ook 1000 pixels is. Maar die scrollbar neemt ook ruimte in beslag.
Er is dus een body van 1000 pixels breed, met daarin global-container van 1000 pixels breed en een scrollbar van +/- 20 pixels breed.
Dat past niet, want de body is 1000 pixels breed en de inhoud 1020 pixels. Dus ontstaat er een horizontale scrollbar.
Zou kunnen, maar in mijn geval springen de 2 "layouts" niet mooi in elkaar over op die manier.
Das een kwestie van ontwerp :).
Kies een andere breakpoint, zorg dat je overflow verbergt (beide reeds voorgesteld) of vermijd dat je hier in eerste instantie tegenaan loopt door je design wat flexibeler te maken (zorg dat je wat "lucht" overhoudt buiten die 1000px ofzo). Veel andere smaken zijn er niet?
