CSS structure de base

**Troyan** · 20/05/2020, 09h53

Bonjour à tous,

je souhaite mettre en place ma structure (simple je pense) de base, afin de pouvoir commencer les développements de mon site.
Seulement les concepts css me manque...

voici l'image du résultat actuel. https://photos.app.goo.gl/V9Y91GB99tyk8soS7

Ce à quoi j'aimerais pouvoir arriver

S1 - sidebar de gauche (jaune sur photo) du haut jusqu'au footer
Header - Fixe en haut de l'ecran mais contenu entre les 2 sidebars.
S2 - Sidebar de droite (violette) du haut jusqu'au footer

J'aimerais que les 2 sidebars fassent toute la hauteur jusqu'au footer.
une à gauche 10% et l'autre à droite 10%.
le header et le contenu doit être entre les 2 sidebars. 80%

footer doit faire 100% de la largeur
si le contenu ne fait pas toute la hauteur de l'ecran il faut que le footer soit en bas.
si le contenu dépasse l'ecran le footer n'est pas fixe mais sera bien après le contenu.

donc les sidebars et le contenu s'arrete au footer.

après l'idée c'est de jouer avec les medias query pour tout avoir sur 100% header, contenu, footer.
faisant disparaitre les 2 sidebars width à 0 par exemple.

je suis preneur d'une autre structure si il y a mieux, j'avais pensé à 3 blocs uniquement mais j'aurais aimé avoir une marge gauche et droite de 10% sur le header & le contenu...

Merci de vos avis, aides

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Share RPG - All Games on VTT</title>
    <link rel="stylesheet" href="css/app.css">
</head>
 
<body>
    <sidebar class="s1">s1</sidebar>
    <header>header</header>
    <section>
        <div class="d1">content</div>
        <div class="d1"></div>
        <div class="d1"></div>
        <div class="d1"></div>
        <div class="d1"></div>
    </section>
    <sidebar class="s2">s2</sidebar>
 
    <footer>footer</footer>
 
</body>
 
</html>

et voici le code du css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
 
*,
*::before,
*::after {
    box-sizing: inherit;
}
 
body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
 
header {
    height: 100px;
    color: white;
    background-color: #514F54;
    flex-basis: 80%;
    order: 2;
}
 
sidebar {
    flex-basis: 10%;
}
 
.s1 {
    height: 400px;
    background-color: #ffff00;
    order: 1;
}
 
.s2 {
    height: 400px;
    background-color: #ff00ff;
    order: 4;
}
 
section {
    background: #F2F3F7;
    flex-basis: 80%;
    order: 3;
    color: white;
}
 
footer {
    height: 100px;
    flex-basis: 100%;
    background-color: green;
    color: white;
    order: 10;
}
 
.d1 {
    height: 80px;
    background-color: #000;
    border: solid 0px red;
}