Bastien Donjon

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

3 colonnes css fixed layout mobile first single page