28182 sujets

CSS et mise en forme, CSS3

[Résolu] Parent s'adaptant à la hauteur d'un enfant en position:absolu

Bonjour,

je cherche à faire en sorte que ma div parent prenne la hauteur d'un enfant en position:absolute

je souhaite garder le fait que l'enfant dépasse du parent en bas mais du coup pour un aspect responsive ça ne fonctionne pas car l'enfant ne pousse pas les blocs suivants .
J'ai besoin d'un espace entre mon bloc texte vert foncé et les 3 photos qui suivent.

upload/1733828537-65174-capturedaeacran2024-12-10aa11.png

voici mon code :

<div class="bloc-margin">

                <div class="bloc-padding bg-cover" style="background-image: url(/img/cover/foret-landes-ecologie.jpg);">
                    
                    <div class="container">

                        <div class="row">
                        
                            <div class="col-lg-3">
                            </div>

                            <div class="col-lg-9">

                                <div class="bloc-container bg-bloc-olive">
                                    
                                    <div class="row">

                                        <div class="col-lg-12">
                                            
                                            <h2>Mon titre</h2>

                                            <p>Mont texte</p>
                                            <p>Mont texte</p>
                                            <p>Mont texte</p>

                                        </div>

                                    </div>

                                </div>
                                
                            </div>

                        </div>

                    </div>

                </div>

            </div>




.bloc-margin {
	margin-top: 80px;
	margin-bottom: 80px;
}
.bloc-padding {
	padding-top: 80px;
	padding-bottom: 80px;
}
.bg-cover {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 450px;
}
.bg-cover:has(.bloc-container) {
	margin-bottom: 150px;
}
.bg-cover:has(.bloc-container) .row > div:last-child {
	position: relative;
}
.bloc-container {
	position: absolute;
	padding: 80px;
	top: 100px;
  	right: 0;
  	width: 100%;
}
.bloc-container h2 {
	margin-top: 0;
}
.bloc-container p:last-child {
	margin-bottom: 0;
}
.bg-bloc-olive {
	background-color: #2b3f27;
	color: var(--color-blanc);
}
.bg-bloc-olive a:not(.btn) {
	color: var(--color-vert);
}
.bg-bloc-olive a:not(.btn):hover {
	color: var(--color-orange);
}


Merci de votre aide Smiley cligne
Modifié par korom (10 Dec 2024 - 12:19)
À vrai dire ce n'est pas vraiment que le parent doit prendre la hauteur de l'enfant mais au moins que le margin-bottom du parent s'additionne à la hauteur de l'enfant.

Quelle que soit la hauteur du contenu de mon bloc vert foncé, la marge entre le bloc vert-foncé et les 3 photos qui suivent doit toujours rester identique.

Voici l'effet souhaité.

upload/1733828522-65174-capturedaeacran2024-12-10aa11.png
Modifié par korom (10 Dec 2024 - 12:04)
Modérateur
Bonjour,

Le position:absolute est-il indispensable ?

Un margin-top devrait suffire, non ?

Amicalement,
parsimonhi a écrit :
Bonjour,

Le position:absolute est-il indispensable ?

Un margin-top devrait suffire, non ?

Amicalement,


En supprimant l'absolute, je n'ai plus le décalage de mon bloc vert foncé qui dépasse en bas de mon parent cover

upload/1733829266-65174-capturedaeacran2024-12-10aa12.png
connecté
Modérateur
Bonjour,

En gardant le positionement static, tu peut par exemple mettre un gradient au dessus d'une région de l'image de fond pour la fondre en partie dans la couleur de fond de la page :

par exemple : 
background-image: linear-gradient(to top, white  80px, transparent 80px), url(https://images.pexels.com/photos/13340411/pexels-photo-13340411.jpeg))


la longueur de 80px est arbitraire et pour l'exemple.


cdt

edit, autres approches :

une ombre interne pour masquer en partie l'image de fond (à la place du gradient) :
box-shadow: inset 0 -50vh #F7F7F7;



Pour le positionement des éléments tu peut aussi utiliser une grille de plusieurs cellule et y reposer tes différents éléments, comme dans cet exemple similaire https://codepen.io/gc-nomade/pen/XWwwMGW (un exemple donné sur SO)
cdt
Modifié par gcyrillus (10 Dec 2024 - 13:29)
Meilleure solution
Modérateur
Bonjour,

korom a écrit :
En supprimant l'absolute, je n'ai plus le décalage de mon bloc vert foncé qui dépasse en bas de mon parent coverupload/1733829266-65174-capturedaeacran2024-12-10aa12.png
S'il s'agit de faire en sorte que le block vert foncé dépasse de la zone où on voit la photo de fond du block .bg-cover (je ne suis pas sûr d'avoir compris), alors on peut, tout en restant sur l'idée de supprimer le position-absolute qui est facteur de complications, rajouter par exemple un pseudo élément sur .bg-cover ayant comme couleur de fond la même que le reste de la page.
.bg-cover {
  position: relative;
}
.bg-cover::before {
  content:'';
  position:absolute;
  top:450px;
  left:0;
  right:0;
  bottom:0;
  background:#f7f7f7;
}
.bloc-container {
  padding: 80px;
  margin-top: 100px;
  margin-bottom: -100px;
  width: 100%;
}
Amicalement,
Modifié par parsimonhi (10 Dec 2024 - 14:45)
@gcyrillus

J'ai réussi à faire ce que je voulais avec le box-shadow inset

Merci
Prévenir un modérateur
Répondre au sujet
Aller à