Hauteur de l'élément débordant de la page

Je travaille sur une page fixe width et height.Hauteur de l'élément débordant de la page

J'utilise un effet de survol, mais j'ai un problème car le overflow-y de la page n'est pas fixé à 100vh (100%). Pourquoi cela arrive-t-il et comment puis-je résoudre ce problème?

img { 
 
    max-width: 100%; 
 
} 
 
.top { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.first { 
 
    width: 50%; 
 
    height: 100vh; 
 
    background-image: url(https://pixabay.com/get/9b249f09fa8c19807d92/1437036240/nature-213364_1280.jpg?direct); 
 
    background-size: cover; 
 
    float: left; 
 
    transition: background-position 0.35s ease; 
 
} 
 
.second { 
 
    width: 50%; 
 
    height: 50vh; 
 
    float: left; 
 
    background-image: url(https://pixabay.com/get/5412212433a79f218468/1437036270/pyrenees-351266_1280.jpg?direct); 
 
    background-size: cover; 
 
} 
 
.third { 
 
    width: 50%; 
 
    height: 50vh; 
 
    float: left; 
 
    background-image: url(https://pixabay.com/get/9480bb6112148d6fe514/1437036286/meadow-196567_1280.jpg?direct); 
 
    background-size: cover; 
 
} 
 
.first:hover { 
 
    background-position: 0 -60px; 
 
    transition: background-position 0.35s ease; 
 
} 
 
/* EFFECT 1*/ 
 

 
div.effect-zoe figcaption { 
 
    bottom: 0; 
 
    position: absolute; 
 
    width: 47%; 
 
    padding: 1.5%; 
 
    background: #fff; 
 
    color: #3c4a50; 
 
    -webkit-transition: -webkit-transform 0.35s; 
 
    transition: transform 0.35s; 
 
    -webkit-transform: translate3d(0, 100%, 0); 
 
    transform: translate3d(0, 100%, 0); 
 
} 
 
div.effect-zoe h2 { 
 
    float: right; 
 
    font-size: 24px; 
 
    letter-spacing: 2px; 
 
    font-weight: 500; 
 
} 
 
div.effect-zoe p.icon-links a { 
 
    float: right; 
 
    color: #3c4a50; 
 
    font-size: 1.4em; 
 
} 
 
div.effect-zoe:hover p.icon-links a:hover, 
 
div.effect-zoe:hover p.icon-links a:focus { 
 
    color: #252d31; 
 
} 
 
div.effect-zoe p.description { 
 
    position: absolute; 
 
    bottom: 8em; 
 
    padding: 2%; 
 
    color: #fff; 
 
    text-transform: none; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 18px; 
 
    border: solid 1px #fff; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.35s; 
 
    transition: opacity 0.35s; 
 
    -webkit-backface-visibility: hidden; 
 
    /* Fix for Chrome 37.0.2062.120 (Mac) */ 
 
} 
 
div.effect-zoe h2 { 
 
    display: inline-block; 
 
} 
 
div.effect-zoe:hover p.description { 
 
    opacity: 1; 
 
} 
 
div.effect-zoe:hover figcaption, 
 
div.effect-zoe:hover h2, 
 
div.effect-zoe:hover p.icon-links a { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
} 
 
div.effect-zoe:hover h2 { 
 
    -webkit-transition-delay: 0.05s; 
 
    transition-delay: 0.05s; 
 
}

<div class="top"></div> 
 
<div class="first effect-zoe"> 
 
    <figcaption> 
 
    <h2>VISITA IL SITO</h2> 
 
    <p class="icon-links"> 
 
     <a href="#"><span class="icon-heart"></span></a> 
 
     <a href="#"><span class="icon-eye"></span></a> 
 
     <a href="#"><span class="icon-paper-clip"></span></a> 
 
    </p> 
 
    <p class="description"><strong>RIVIERA - HOME</strong><br/>Un luogo da cui partire, un luogo in cui far ritorno..</p> 
 
    </figcaption> 
 
</div> 
 
<div class="second"></div> 
 
<div class="third"></div>

Source

2015-07-16 Riccardo New R Bernucci

est tout le code CSS nécessaires pour reproduire votre problème? Si ce n'est pas le cas, modifiez-le et simplifiez-le, ce sera mieux pour les gens qui veulent vous aider. –

Oui tu as raison je le simplifie –

Vous avez quelques questions qui doivent être abordées:

Par défaut body a margin appliqué par le navigateur. Supprimez cela en ajoutant margin: 0; à body
Le height de .first doit être défini pour ne pas se développer si son contenu déborde. Pour ce faire, en ajoutant overflow: hidden; à .first
figcaption doit être positionné par rapport à .first. Pour ce faire, en ajoutant position: relative; à .first
Comme .first est maintenant position: relative;.top devra être modifié pour s'assurer qu'il est positionné au-dessus. Pour ce faire, en ajoutant z-index: 1; à .top
Maintenant que figcaption est par rapport à .first modifier le width en conséquence pour s'adapter. Changer width: 47%; à width: 97%;

body { 
 
    margin: 0; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.top { 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.first { 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 100vh; 
 
    background-image: url(https://pixabay.com/get/9b249f09fa8c19807d92/1437036240/nature-213364_1280.jpg?direct); 
 
    background-size: cover; 
 
    float: left; 
 
    transition: background-position 0.35s ease; 
 
} 
 
.second { 
 
    width: 50%; 
 
    height: 50vh; 
 
    float: left; 
 
    background-image: url(https://pixabay.com/get/5412212433a79f218468/1437036270/pyrenees-351266_1280.jpg?direct); 
 
    background-size: cover; 
 
} 
 
.third { 
 
    width: 50%; 
 
    height: 50vh; 
 
    float: left; 
 
    background-image: url(https://pixabay.com/get/9480bb6112148d6fe514/1437036286/meadow-196567_1280.jpg?direct); 
 
    background-size: cover; 
 
} 
 
.first:hover { 
 
    background-position: 0 -60px; 
 
    transition: background-position 0.35s ease; 
 
} 
 
/* EFFECT 1*/ 
 

 
div.effect-zoe figcaption { 
 
    bottom: 0; 
 
    position: absolute; 
 
    width: 97%; 
 
    padding: 1.5%; 
 
    background: #fff; 
 
    color: #3c4a50; 
 
    -webkit-transition: -webkit-transform 0.35s; 
 
    transition: transform 0.35s; 
 
    -webkit-transform: translate3d(0, 100%, 0); 
 
    transform: translate3d(0, 100%, 0); 
 
} 
 
div.effect-zoe h2 { 
 
    float: right; 
 
    font-size: 24px; 
 
    letter-spacing: 2px; 
 
    font-weight: 500; 
 
} 
 
div.effect-zoe p.icon-links a { 
 
    float: right; 
 
    color: #3c4a50; 
 
    font-size: 1.4em; 
 
} 
 
div.effect-zoe:hover p.icon-links a:hover, 
 
div.effect-zoe:hover p.icon-links a:focus { 
 
    color: #252d31; 
 
} 
 
div.effect-zoe p.description { 
 
    position: absolute; 
 
    bottom: 8em; 
 
    padding: 2%; 
 
    color: #fff; 
 
    text-transform: none; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 18px; 
 
    border: solid 1px #fff; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.35s; 
 
    transition: opacity 0.35s; 
 
    -webkit-backface-visibility: hidden; 
 
    /* Fix for Chrome 37.0.2062.120 (Mac) */ 
 
} 
 
div.effect-zoe h2 { 
 
    display: inline-block; 
 
} 
 
div.effect-zoe:hover p.description { 
 
    opacity: 1; 
 
} 
 
div.effect-zoe:hover figcaption, 
 
div.effect-zoe:hover h2, 
 
div.effect-zoe:hover p.icon-links a { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
} 
 
div.effect-zoe:hover h2 { 
 
    -webkit-transition-delay: 0.05s; 
 
    transition-delay: 0.05s; 
 
}

<div class="top"></div> 
 
<div class="first effect-zoe"> 
 
    <figcaption> 
 
    <h2>VISITA IL SITO</h2> 
 
    <p class="icon-links"> 
 
     <a href="#"><span class="icon-heart"></span></a> 
 
     <a href="#"><span class="icon-eye"></span></a> 
 
     <a href="#"><span class="icon-paper-clip"></span></a> 
 
    </p> 
 
    <p class="description"><strong>RIVIERA - HOME</strong> 
 
     <br/>Un luogo da cui partire, un luogo in cui far ritorno.. 
 
    </p> 
 
    </figcaption> 
 
</div> 
 
<div class="second"></div> 
 
<div class="third"></div>

Source

2015-07-16 09:29:27

Ca marche vraiment bien !! Merci beaucoup!!! donc le problème principal était la position relative du contenu principal! et avec "débordement: caché" tout ce qui est hors de div ne sera pas visible ... ty –

Pas de problème, contente que je puisse aider. Oui, ces deux sont les principaux coupables. Sans 'position: relative;' on '.first'' figcaption' était positionné par rapport au 'body' à la place. –

Hauteur de l'élément débordant de la page

Répondre

Questions connexes