Bastien Donjon

Développeur web à Bordeaux

Wednesday

10

April 2013

0

COMMENTS

Colonnes fixes dans un site web de type “Single page”

Written by , Posted in css

Le web se voit de plus en plus influencé par la conception ergonomique des applications mobiles. On parle notamment de la technique de conception “Mobile first” et de l’approche “single page”.

Qu’est-ce que l’approche “Single page” ?

Rien de bien compliqué. C’est un site qui n’a qu’une seul page … et où seulement une partie de celui-ci est mis à jour selon les actions de l’utilisation. Niveau ergonomie, il n’y a pas de scroll général mais éventuellement des scrolls sur des parties du site.

Le layout

Je vous propose de monter un layout composé d’un header fixe, d’un footer fixe et de 3 colonnes qui complètent la place centrale restante.

html :

<div id="header"></div>
<div id="colonnes">
    <div>1</div>
    <div>2</div>
    <div id="last">3</div>
    <div style="clear:both;"></div>
</div>
<div id="footer"></div>

css :

#header {
    background-color: yellow;
    height: 20px;
}

#colonnes {
    position: fixed;
    height: auto;
    top:20px;
    bottom: 20px;
}

#colonnes div{
    float: left;
    width: 100px;
    height: 100%;
    bottom: 0;
    margin: 0 10px 0 0;
    background-color: black;
}

#footer {
    background-color: red;
    height: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

body{
    height: 100%;
    padding: 0;
    margin: 0;
}

exemple