Discussion :

[NewbieOnLine]

Bonjour

J ai une div (page-home) sur laquelle j affiche du contenu et un bandeau sur sa base.

Code css :

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
 
.home {
        width: 100%;
        min-height: 75% !important;
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/home.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
        position: relative;
 
    }
 
.bandeau-home {
	position: absolute;
	bottom: 0;
	background:  rgba(127,255,0,0.8);
	width: 100%;
	color: #fff
}

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
<div class="home">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
    <div class="bandeau-home">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
 
</div>

Cela fonctionne comme désiré mais si le contenu de la div 'home' est trop important, l ors d un redimensionnement par exemple, ce dernier passe fort logiquement sous le bandeau.
j'aimerai que la div soit extensible, ce que je pensais avoir fait avec un min-height, mais visiblement non !

Donc je me tourne vers vous pour comprendre et trouver une solution.
Merci de votre aide

Stéphane

[Invité]

Bonjour,

pour reproduire l'effet, il manque :

Code :

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

html, body { height:100%; min-height:100%; }

Solutions :

1. limiter la quantité de texte !! (on ne met pas 15km de textes dans un tel bloc)
2. via media queries, modifier la hauteur du bandeau, pour contenir tous le texte
3. OU passer volontairement le texte en dessous (remplacer bottom:0; par top: 100%

[NewbieOnLine]

merci d avoir pris le temps de t intéresser à mon problème.

je vais tester tout cela.