login  Naam:   Wachtwoord: 
Registreer je!
 Forum

moeilijk probleem met scrollbar in DIV zetten

Offline Mick1337 - 05/12/2010 08:29
Avatar van Mick1337Nieuw lid oke, ik zal mijn uitleg beginnen;

mijn site ziet ongeveer zo uit:
http://img41.im...layout.jpg

Rood: header (image bestand, daaronder zit ook nog de navigator)
Geel: achtergrond vn site (ook image)
Paars: Footer (vast gezet met position: relative; marge-top: ..px)
Blauw: plek waar de tekst moet komen enz
Groen: de scrollbar die ik wil hebben (plek en grote)

het probleem is dat ik de site op alle resoluties goed will hebben, alles van de layout staat op dit moment zodat het op alle browsers en resoluties zo uitziet. position relative voor footer, Header is bepaald door de "height" in "px".

nu wil ik in het blauwe vak een scrollbar hebben voor als er te veel tekst in staat, maar ik kan die DIV zover ik weet geen eige "height" geven, omdat de grote dan niet meer zal kloppen in andere resoluties. omdat ik hem geen height kan geven krijg ik er geen scrollbar in.

iemand die weet hoe ik het kan coderen zodat et wel werkt? hulp zal zeer gewaardeerd zijn

8 antwoorden

Gesponsorde links
Offline qubus - 05/12/2010 08:34 (laatste wijziging 05/12/2010 08:34)
Avatar van qubus Lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. overflow: auto


toevoegen aan de css van de blauwe div zou moeten werken. Er komen dan scrollbars als het nodig is omdat de content de div uitloopt.
Offline Mick1337 - 05/12/2010 08:41 (laatste wijziging 05/12/2010 09:47)
Avatar van Mick1337 Nieuw lid ja maar de div heeft geen eigen height, omdat ik er geen height in procenten in kan zetten, omdat de header niet in procenten is en dan de layout bugged op andere resoluties, en als ik height in px zet is het het zelfde probleem

en doordat de div geen eigen height heeft, loopt de tekst door buiten het scherm als het te lang is i.p.v. dat er een scrollbar komt. ik heb met overflow: auto al geprobeert namelijk, en ook met overflow: scroll; getest, en bij overflow: scroll zie je het dan in eht grijs en zie je het onderste pijltje van de scrollbar niet, omdat die buiten het scherm ligt.

in principe zou een manier voor "height" zo te zetten als "100% -(header height+navigatorhight)px" de ultieme oplossing zijn.. helaas werkt deze code niet xD (dus in principe 100% - header+navigator hoogte dus dat alles eronder overblijft)
Offline Kevin - 05/12/2010 19:10
Avatar van Kevin Crew Ajax/REST @Mick1337: Met JS zou je in jouw manier dat kunnen opvangen.

Kan je misschien even die pagina ergens online plaatsen en de link geven? Dat lijkt me al makkelijker.
Offline Mick1337 - 05/12/2010 22:21
Avatar van Mick1337 Nieuw lid http://insane.zymichost.com/test.html

ik heb het venster met Test<br> gespammed, en gaat normaal nog een lang stuk door bij dat scherm. heb mijn site layout grotendeels met css gemaakt zodat ik het simpel kan recallen in een andere html en geen meter lange html in hebt waar ik in moet zoeken wat ik wil editen, en dingen makkelijk kan veranderen.
Offline Kevin - 05/12/2010 23:50 (laatste wijziging 05/12/2010 23:50)
Avatar van Kevin Crew Ajax/REST Veel handiger nu we het zo kunnen bekijken. Voor hetgeen je wil bereiken moet je inderdaad dynamisch aan de client-side berekenen hoe hoog je huidig venster is. Zoals al vermeld kan dit met JavaScript (vrij easy met een JS lib zelfs).

Om eerlijk te zijn, het gaat er dan wel wat uitzien zoals een iframe. Heb het zonet even getest met safari dev tools. Ik zou eerder opteren voor toch een vaste hoogte.
Offline Mick1337 - 06/12/2010 01:44 (laatste wijziging 06/12/2010 01:45)
Avatar van Mick1337 Nieuw lid nou ik heb alleen ee y-scrollbar nodig, en ik heb een vriend die veel met java en c++ werkt dus ik zal hem wel vragen of hij een oplossing weet waarbij het toch nog zo uit blijft zien, anders zal ik idd helaas voor een vaste hoogte moeten gaan, maar ik denk dat ik dan gewoon min-height 100% in mijn content aanzet en dan hele pagina laat scrollen als het groter is
Offline MrWolf - 06/12/2010 21:11
Avatar van MrWolf Lid Je hebt niet eens JS nodig want je kan voor je blauwe vak gewoon dit doen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #blauweVak {
  2.   position:absolute;
  3.   top:90px;
  4.   bottom:20px;
  5. }

Dan moet je nog wel die 90px en 20px aanpassen.

Mr. Wolf
Bedankt door: Mick1337
Offline Mick1337 - 07/12/2010 23:40 (laatste wijziging 07/12/2010 23:45)
Avatar van Mick1337 Nieuw lid oke bedankt MrWolf dat werkt, alleen nu loopt mijn background image niet meer door, en ligt mijn footer niet meer eronder. ik zal proberen zelf op te lossen ondertussen, site updated met bugs nu
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s