[html/css] Content schalen tot over footer - Softwareontwikkeling

dinsdag 5 november 2013 19:24

Acties:

Topicstarter

Momenteel ben ik bezig aan een site waarbij het volgende de bedoeling is:
Afbeeldingslocatie: http://i.imgur.com/nEQmxir.png

Hieraan zitten een aantal punten,

Content schaalt op tot aan de footer
Footer blijft altijd onderaan het venster (De content div vult dus op tot aan de footer, footer staat altijd onderaan maar kan naar beneden verplaatsen)
Het menu valt deels over de footer heen.

Het vastzetten van de footer en laten meeschalen met de content op het moment dat de content niet direct in een venster past is geen probleem, andersom gaat het echter fout. Dan staat de footer netjes op zn plaats (tegen de bodem aan) maar schalen de divs met content en het menu niet mee naar beneden. Deze worden afgekapt.

Dit is mijn code tot nu toe:

HTML:

<!doctype html>
<html>
    <head>
        <title>Voorbeeld voor GoT</title>
        <style type="text/css">
            html,
            body {
                background-color: #ff9900;
                height: 100%;
                margin: 0;
                padding: 0
            }

            #wrap {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -100px;
                padding: 0;
            }

            #footer, 
            .push {
                height: 100px;
            }

            #header {
                margin: 0;
                background-color: green;
            }

            h1 {
                margin: 0;
            }

            #sidebar {
                float: left;
                width: 200px;
                background-color: red;
            }

            #content {
                float: left;
                width: 700px;
                background-color: blue;
                color: #fff;
            }

            #footer {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <h1>Titel</h1>
            </div>
            
            <div id="sidebar">
                <ul class="menu">
                    <li>Menu item 1</li>
                    <li>Menu item 2</li>
                    <li>Menu item 3</li>
                </ul>
            </div>
            
            <div id="content" class="container">
                <h2>Content title</h2>
                
                <p>Lorem ipsum dolor sit amet.</p>
                
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        <div class="push"></div>
        </div>
        <div id="footer">
            <div class="container">
                &copy; 2013 Copywrong etc.
            </div>
        </div>
    </body>
</html>

Tevens te vinden als jsfiddle: jsfiddle.net/Hr9Ku

woensdag 6 november 2013 10:07

Acties:

TheNephilim

Wtfuzzle

Okeuj en nu even concreet wat er niet lukt op een rijtje?

woensdag 6 november 2013 10:28

Acties:

Verwijderd

Gevalletje faux columns?

http://alistapart.com/article/fauxcolumns

Anders even googlen op faux columns tutorial.

woensdag 6 november 2013 10:46

Acties:

naam

Topicstarter

TheNephilim schreef op woensdag 06 november 2013 @ 10:07:
Okeuj en nu even concreet wat er niet lukt op een rijtje?

Ik wil de div met de content (blauw in mn voorbeeld) en het menu (rood) door laten lopen tot tegen de footer aan. Ook als dat betekend dat een deel van de div gewoon leeg is. Bij een inhoud die langer is dan 1 'schermhoogte' moet het geheel de footer naar beneden drukken.

Het naar beneden drukken van de footer bij een content die lang is lukt wel, maar de content/menu laten opvullen tot aan de footer lukt niet.

woensdag 6 november 2013 11:42

Acties:

TheNephilim

Wtfuzzle

Erg lastig om goed voor elkaar te krijgen kan ik je vertellen, maar de reactie van mike.stijlloos zou je een eindje op weg moeten helpen.

Het lastige is de twee verschillende achtergronden links en rechts, anders was je er al snel. Heb zo even geen concrete oplossing. Je wrapper een achtergrond geven en de content zelf niet is soms een truukje, dan met height: 100%; aan de slag voor je menu. Maar dat hangt allemaal af van de wat erin zit en hoe het eruit ziet.

woensdag 6 november 2013 12:06

Acties:

Verwijderd

Je kan anders nog met javascript de kolommen (menu en content) een gelijke hoogte geven en de menu doorloop 'faken' in de footer. Omdat de footer ook nog sticky moet zijn, wordt het lastig om dit met pure CSS te doen zonder te weten hoe het design er uitziet.

Als je al jQuery gebruikt zou je deze plugin: jQuery.equalHeights kunnen gebruiken of het anders refactoren naar native javascript.