Div over volledige beschikbare hoogte gebruiken.

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Ik heb een klein probleempje in mijn webapp waar ik niet uit kom. Het gaat hierbij om de applicatie vensters.

Ik zal even proberen het probleem te schetsen:

CSSAppProb.png


De buitenste rand (zwart) zijn de contouren van een div waar de rest in moet komen. Daarin zit een titelbalk (oranje) en een statusbalk (grijs). Zover geen probleem.

Wat wel een probleem is, is het volgende. De het "window" is van variabele grootte. De titelbar zit volgens de normale "flow" gewoon bovenin, dan komt de "main-div" (groen) en dan de statusbar.

Nu heb ik al van alles geprobeerd, maar ik krijg het niet voor elkaar dat de "main-div" alle beschikbare hoogte gebruikt.

Ik zelfs geprobeerd om het met tabellen te bereiken, maar ook dat kreeg ik niet voor elkaar.

Heeft iemand hiervoor een oplossing? Alvast bedankt!
 
Nu heb ik al van alles geprobeerd, maar ik krijg het niet voor elkaar dat de "main-div" alle beschikbare hoogte gebruikt.
Klik om te vergroten...
hoe bedoel je dit precies? Dat het groene div alle hoogte gebruikt, minus het oranje + grijze vlak? Ik zou zeggen, probeer[JS]height: 100%[/JS]
maar dat is een beetje een cheapshot, dat zal je zelf ook al wel hebben geprobeerd. Kan je mischien de css geven van wat je nu hebt?



[edit] na wat lopen testen ben ik erachter wat je probleem is. Nu, ik kan zo snel geen oplossing vinden, maar wat mischien iets is: gebruik geen 'main' stukje (groen); dus maak alleen divs voor de titel- en statusbar. Laat de content dan de rest gewoon opvullen, en dan de 'wrap' div ook geen hoogte meegeven:
HTML: 
<div id='wrap'>

   <div id='title'></div>

      <!-- hier de main-code -->

   <div id='status'></div>

</div>
(en dan je wrapper als background-color groen geven :p)[/edit]
 
Laatst bewerkt:
Code: 
height: 100%;

had ik inderdaad geprobeerd en dat werkte niet :P

Het is inderdaad wel een idee om de content dan gewoon niet in een div te zetten, maar direct in de "wrap", ware het niet, dat de wrap niet mee mag "sizen" met de content.

De wrap mag alleen resizen als de gebruiker de randen versleept of het venster "maximaliseert". Als de "main-content" groter wordt dan het vlak dat beschikbaar is, moet er gewoon een scrollbar getoond worden (mag ook permanent getoond worden).

Ik zou het nog met JavaScript kunnen doen, maar dat vind ik geen mooie oplossing.

[EDIT]
En dit zijn niet de kleuren die ik daadwerkelijk gebruik ;):P
[/EDIT]
 
waarom niet? het zijn best mooie kleuren :p


anywho, wat dacht je hier van: geen content-div, maar alleen de wrap. Deze heeft hoogte x, en overflow: auto (of: overflow-y: auto). Het enige wat nu niet klopt is dat de taskbar fout gaat doen; dit kan je oplossen door de wrap te veranderen, OF er een extra 'wrap' in te zetten. Ofzo. Check t voorbeeldje gewoon even :p

test.html
HTML: 
<div id='wrap'>

      <div id='task'>
         task bar!
      </div>

   <div id='main'>
      main gevalletje!<br />dit is groter dan de 200px height!<br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br />echt!
   </div>


   <div id='status'>
      status bar!
   </div>
</div>

<style>
div#wrap
{
   width: 300px;
   height: 250px;    /* height van main + 25 title + 25 status */
   border: 2px solid #333;
}
div#main
{
   width: 300px;
   height: 200px;
   overflow-y: auto;
}
div#task
{
   width: 100%;
   height: 25px;
   background-color: #f06;
}

div#main
{
   width: 100%;
   background-color: #0f6;
}

div#status
{
   position: relative;
   bottom: 0px;
   width: 100%;
   height: 25px;
   background-color: #60f;
}
</style>
het is dus wel zo dat je de hoogte even moet berekenen, maar ik neem aan dat je dit met js doet ofzo. Overgens kan je de wrap-div height weglaten, deze rekt automatisch. Dus dan hoef je dat ook niet meer te berekenen.
 
Laatst bewerkt:
Ik denk dat ik het inderdaad zo ga doen. Dan leg ik de afmetingen gewoon vast en bij een resize bereken ik de hoogte van div#main dan opnieuw.

Ik laat het topic nog wel even open staan voor als iemand nog een pure-CSS oplossing weet die ook bij het resizen werkt.

Anyway, thanks again! :D
 
Deels wel en deels niet. Ik heb al eerder een soortgelijke vraag gesteld, toen kreeg ik ook deze link van je, dus daar had ik eerst nog even naar gekeken.

Maar het punt is hier, dat het visueel allemaal wel klopt, maar de content div, schuift als het ware achter de footer. De footer zou in mijn geval de statusbalk zijn. En dat is hier niet de bedoeling, want ik wil een scrollbar weergeven aan de rechterkant, en die verdwijnt dan deels achter de statusbalk. Daarnaast is de code op die pagina gemaakt zo dat de pagina meerekt met de content, dat wil ik ook eigenlijk niet.

Maar bedankt voor het meedenken :D
 
Oplossen door een padding- of margin-bottom in te stellen op de content?
Verder een max-height meegeven aan de content?

Of denk ik nu te makkelijk :D
 
Zou kunnen, dat ga ik straks nog even proberen! :thumb:
 
Eh, op de goede plaats in de knalgroene "main" een { overflow: auto; } mikken?

Dan zou je (zo nodig) een extra, inwendige, verticale scrollbar moeten krijgen, als de main-content te groot wordt voor de beschikbare schermhoogte.

Nu heb ik altijd een beetje de pest aan een extra verticale scrollbar, want vind het wat veel van het goede.
  • Ik raak altijd in verwarring welke van de twee ik nu moet gebruiken (de gewone helemaal a/d rechterkant, of de inwendige, die soms meters ver van de gewone af zit).
  • En ik ben lui, ik wil mijn muis niet verplaatsen om te scrollen - de muis van mij gaat altijd uit zichzelf naar rechts om te scrollen, en dan moet ie naar links om bij de kaas te komen. :D
  • En bij sommige sites moet je zelfs beide verticale scrollbars afwisselend gebruiken om bij de kaas te komen (waarschijnlijk hebben de bedenkers er dan niet aan gedacht dat niet iedereen een supergroot designers-beeldscherm heeft): niet het summum van gebruikersgemak ...
Maar als je met de 100% hoogte de gewone rechterscrollbar uitschakelt, zal het wel meevallen met de gebruikersonvriendelijkheid. ;)

Alternatief: het menu niet bovenin hangen, maar gefixeerd ("static") aan de linkerkant. Dan kan je rechts naar hartelust met de gewone scrollbar scrollen, en kan je met wat inspanning waarschijnlijk ook nog de footer altijd onderaan laten staan. Neem een kijkje hier voor het genereren van dergelijke ideeën. :)
De extra gescrollbarde <div> met hun broncode moet alleen nog even gewipt worden, dan is ie mooi schoon. :D

Groetjes,
CSShunter
 
O, misschien alternatief 2.
Ik durf het woord haast niet uit te spreken: "frames" ... :o
Ik heb niets gezegd hoor! :D

CSShunter
 
Ik kan wel overflow: auto; erin zetten, maar dat helpt niet. Het gaat erom dat de div "weet" welke hoogte ie moet hebben zeg maar.

Nu vind ik de "extra" scrollbar ook geen probleem, want het hele doel is om het er als een applicatie venster uit te laten zien. En de gewone scrollbar heb ik inderdaad uitgeschakeld.

Maar de scrollbar was ook niet echt het probleem, ging dus echt om de hoogte van de middelste div.

Ik ga er straks / morgen nog even mee aan het prutsen, ben nu weer met een andere site bezig.

In ieder geval bedankt!

P.S. Frames had ik inderdaad ook al even aan gedacht, want de indeling van een frameset is echt een perfecte oplossing voor m'n probleem. Maarja, van het gebruik van frames ga ik slecht slapen ;)
 
Toch nog even geen frames. ;)

Ik gooi deze hier eerst nog maar eens in de strijd. :D
Bij mij komt hij als winnaar uit de bus met FF3, IE7, Opera en Safari. - Rest niet getest.

Internet Explorer 7 heeft er maar eens een dubbele scrollbar rechts van gemaakt (pal naast elkaar; de een niet, en de ander wel werkend). Firefox, Opera en Safari doen niet zo mal.
 
Dat ziet er goed uit. Slechts één puntje. Zo komt m'n scrollbar langs m'n titelbalk en statusbalk te lopen. Dat is dan weer jammer :confused:
 
Oeft niet. Hij kan ook zo. :)

Dan ben je de onder en boven driehoek-knopjes van de scrollbar kwijt, maar dat is misschien niet onoverkomelijk.
Ik gebruik ze niet zoveel, en vind het eigenlijk wel heel erg sjiek staan, zo zonder. :cool:

Tenminste als je de andere kleurtjes even wegdenkt! :D

CSShunter

Edit:
Valt me nu ineens op dat op mijn WinXP scrollbars helemaal geen driehoekjes zitten, maar >'jes. Dat is dus kennelijk al het geval sinds ik Win98SE naar de Virtuele PC heb verbannen. ;)
 
Laatst bewerkt:
Tsja, het werkt zo wel maar het is het toch net niet.

Ten eerste verdwijnt een stuk van de scrollbar nog achter de andere div's en ten tweede, als de content erg groot wordt, ben de de scrollbar helemaal kwijt als je helemaal naar boven gescrolled bent.

Ik denk dat ik toch voor de oplossing ga waarbij ik de hoogte van de div van de voren vastleg en bij een resize van het "applicatie-scherm" herdefinieer.

Wel hartelijk bedankt voor de genomen moeite! :D
 
Voor de gein nog even verder op css-jacht geweest.
En daarmee @post 5 sept. 15:48
Dat ziet er goed uit. Slechts één puntje. Zo komt m'n scrollbar langs m'n titelbalk en statusbalk te lopen. Dat is dan weer jammer. :-(
Klik om te vergroten...
Hoe jammer dit puntje is, hangt denk ik helemaal af van het verdere design van de pagina. :D

Wie zoiets als deze ziet, zou die bevroeden wat er zich allemaal onder water in de broncode afspeelt om te bewerkstelligen dat de 9000 tekstregels keurig tussen het menu en de statusbar gepresenteerd worden? :)

Prettig weekend verder!
CSShunter

PS: Gek hè, als ik aan het webberen ben, ga ik vanzelf eerst helemaal in het Engels denken > dat moet ik dan later weer vertalen in het NL. Niet altijd, dus. ;)
 
Dat ziet er leuk uit, dat laatste voorbeeld.
Die nutteloze scrollbar in IE 7 (en IE 6) kun je wegkrijgen door aan html
{overflow: hidden;} toe te voegen.
Moet je wel even testen of 't geen bij-effecten heeft, maar in dit geval niet, denk ik, want er is toch geen 'echte' scrollbar voor 't venster van de browser nodig. (Als ik 't goed heb gezien).
Om problemen met echte browsers te voorkomen door die twee prullen geef ik altijd even 'n id aan <html>, zodat ik via 'n conditional comment die overflow: hidden alleen aan IE 6 en 7 geef.
 
Kijk, zo kom je nog eens ergens, Goeroeboeroe: Conditional Comment met html { overflow: hidden } er in, en dubbele scrollbar in IE7 er uit! :)

Even naar virtuele PC voor IE6 ... moet even Win98SE opstarten ... Jerommeke niet blij. Oefs! :o

Allebei de scrollbars weg, dat hadden we nu ook niet gevraagd! :shocked:
Ook de PageUp en PageDown toets en de Home en End-toets en het scrollwieltje weigeren elke dienst: en regel 20 of daaromtrent is het laatste wat we te zien kunnen krijgen: er is geen beweging in te krijgen, beeld compleet verstijfd!
En ook: weg mooie menubar en statusbar: ganselijk verhaspeld!

Dan maar snel de CC voor IE6 er weer uit gehaald ... even uploaden ... hmm, nu wel 1 scrollbar, maar nog steeds de menu- en statusbar foutief weergegeven, en ... de statusbar blijft niet meer onderaan kleven, maar gaat vrolijk met regel 19 mee naar boven! :eek:

Dat had ik dus nog niet getest, weer eens te vol van vertrouwen geweest voor IE; moet je ook nooit doen! Want in de eerste testpagina deed IE6 het heel anders: goed! (alleen de boven- en benedenbalk kwamen nog niet op volle breedte).
Mijn extra div'jes van nu voor de uiteinden van de boven- en benedenbar zullen roet in het eten gegooid hebben. Wel meer gemerkt bij de liquid round corners: hackjes nodig...

IE6 moet dus nog duidelijk een helpende hand toegereikt worden voor dit ontwerp. Te pas en te onpas "position: relative" toevoegen zal hier jammer genoeg een niet opstijgende vlieger zijn: alles moet hier absoluut. ;)
Zoom: 1? Height: 1% (wordt wat moeilijk)? Display: block, inline, inline-block, outline-block? Width: 100%? Extra containers eromheen hangen? Combinaties hiervan? Of toch: <!--[if IE 6]><style type="text/css"> * { forget: styles; }? :D

Voor als ik nog eens tijd heb, maar dat zit er voorlopig niet in.
't Is toch jammer.

Prettig weekend nog!
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan