Avatar billede Thomasso75 Nybegynder
07. juli 2015 - 20:40 Der er 2 kommentarer og
1 løsning

CSS sidebar skal have 100% højde af parent div

Hej.

Jeg sidder med et problem. Jeg arbejder på at designe www.quest2move.dk, hvor alle undersiderne indeholder et ekstra stylesheet, der definerer en sidebar i højre side af siden.
På eksempelvis http://www.quest2move.dk/kontakt/, går sidebar helt til bunden i det selve indholdet af sidebar er længere end indholdet i vensre ramme/div. Men hvis der kommer lidt mere indhold i venstre div vil sidebar ikke følge med ned til bunden, se eksempelvis http://www.quest2move.dk/coaching/.

Selve stylesheet for sidebar ser ud som følger:
#main {
    float: left;
    width: 65%;
    margin: 0;
    display: block;
}
#main-core {
    margin: 0;
    padding: 15px;
}
#sidebar {
    float: right;
    width: 35%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    background: url("../../images/content_bg.png") repeat-y;
   
}
#sidebar-core {
    margin: 0;
    padding: 15px;
    padding-left: 40px;
}

Jeg har forsøgt mig med nogle forskellige ting, men lige lidt har det hjulpet. Jeg har angivet en 100% height på #sidebar og dens parent divs, hrml og body osv, men lige lidt hjælper det.

Ligeledes kunne jeg godt tænke mig at den gik helt ud i højre side og ikke havde det gap, der er nu. Jeg har forsøgt mig med float right og også at benytte alt tilgængelig plads ved at definere de to divs så de optager 100% af bredden af parent div.

Det skal siges at det køres som et child theme og at jeg har haft noget bøvl med at fjerne styles fra hovedtemaet og så få child temaet til at benytte de stylesheets.
Dette er gjort i functions.php, men bør nok ikke have den store indflydelse - tror jeg.

Er der en skarp hjerne der kan hjælpe mig i den rigtige retning? Glem nu farven på sidebar - det er KUN test ;)

Takker og bukker på forhånd.
Med venlige hilsner
Thomas
Avatar billede hanibald Mester
07. juli 2015 - 22:17 #1
Hej Thomas

Det problem du ser ud til at sidde med - at sidebar (farve antager jeg) altid følger den længste kolonne - kan du ikke (gentager ikke) løse på fornuftig vis med de traditionelle div-bokse vi har brugt i årevis. For at løse det skal du bruge den nye design-model "flexbox". Jeg sidder i øjeblikket og prøver at forstå, hvordan den virker. Den er meget ny, og der er meget lidt at hente på nettet (for at være relevant skal materiale på nettet være fra meget sent 2014 eller 2015).
Du kan finde lidt god introduktion til flexbox her:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.youtube.com/watch?v=G7EIAgfkhmg
https://www.youtube.com/watch?v=rSt_RTo8Gqs

Pøj pøj
Avatar billede Thomasso75 Nybegynder
15. juli 2015 - 16:23 #2
Halløjsa.

Mange tak for dit svar og beklager min sene tilbagemelding.
Lægger du lige et svar?

Med venlig hilsen
Thomas
Avatar billede Thomasso75 Nybegynder
06. august 2015 - 11:24 #3
Lukket
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester