The element is spilling over the height of the page

I'm currently working on a webpage with a fixed width and height.

Although I'm incorporating hover effects, I'm encountering an issue where the vertical overflow of the page is not set to 100% (100vh).

What could be causing this problem and how can I go about resolving it?

img {
  max-width: 100%;
}
.top {
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 0;
}
/* More CSS codes for different effects and transitions */

<div class="top"></div>
<div class="first effect-zoe">
  <figcaption>
    <h2>VISIT THE SITE</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/>A place to start from, a place to come back to.</p>
  </figcaption>
</div>
<div class="second"></div>
<div class="third"></div>

htmlcsshoveroverflow

Answer №1

You have a couple of issues that should be resolved:

  • The browser automatically adds a default margin to the body. To remove it, include margin: 0; in the body styles
  • To prevent the content from overflowing, set the height of .first and add overflow: hidden; to its styles
  • Ensure that figcaption is relatively positioned to .first by adding position: relative; to .first
  • Since .first is now position: relative;, adjust .top by adding z-index: 1; to position it correctly
  • Now that figcaption is relative to .first, modify the width to fit by changing width: 47%; to 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...

csshtml

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

cssreactjstypescriptnext.js

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...

javascripthtmlangulartypescript

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

javascripthtmlangularjsdatetime

Exploring the capabilities of querying HTML using XPath with Python's lxml library

After reading an HTML page as a string, I am using tree = html.fromstring(data). Now, I aim to utilize lxml xpath for querying. Here is an example of the specific part that piques my interest: <table class="class"> <tbody> <tr> &l ...

pythonhtmlxmlxpathlxml

Jquery functionality fails to execute post-Ajax request

Here is the function in question: $(document).ready(function() { $('.post_button, .btn_favorite').click(function() { //Fade in the Popup $('.login_modal_message').fadeIn(500); // Add the mask to body $('body').append(' ...

javascriptjqueryajaxhtml

The PHP header() function is not properly redirecting the page, instead it is only displaying the HTML

After double checking that no client sided data was being sent beforehand and enabling error reporting, I am still encountering issues. The issue revolves around a basic login script with redirection upon validation. <?php include_once "database- ...

javascriptphpjqueryhtmlajax

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...

javascriptjqueryhtmlangularjscss

Exploring ways to style font families for individual options within ng-options

I am looking to display a combobox where each option has a different font. While using the ng-options directive in AngularJS to populate the options for a <select> tag, I am struggling to set the font-family for individual options. $scope.reportFon ...

cssangularjsangular-ui-bootstrap

Sending information from one page to another and then sending it once more

I am currently utilizing the following code to submit a form's data to : <script type="text/javascript"> $(document).ready(function(){ $("#textnextofkin").validate({ debug: false, rules: { ...

phpjavascripthtmlajaxforms

Troubleshooting Issue with Ionic's UI Router

Recently, I created a basic Ionic app to gain a better understanding of UI router functionality. To my surprise, when I ran the app, nothing appeared on the screen. Additionally, the developer tools in Google Chrome did not show any errors or information. ...

javascripthtmlangularjsionic-framework

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Hey there! I'm currently working on my very first webpage and recently added an audio element that is functioning perfectly. The only issue I'm encountering is trying to position the element at the bottom of my page. I've already attempted ...

csshtml

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

javascripthtmljsonanimationchart.js

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

javascripthtmlangulartypescript

What steps are necessary to add a Contact Us form to my HTML website?

Currently, I am searching for a way to add a "Contact Us" section to my website that is completely HTML-based. I believe the best approach would involve using a PHP script to handle sending emails from a form on the Contact Us page, but I am not familiar ...

phpjavascriptjqueryhtml

Place the image in the middle of a div

Struggling to horizontally center an image in a div, but for some reason it's just not working. I've centered images many times before, so why is it different this time? Here's what I've attempted... CSS #cabeca{ position: relative; f ...

htmlcssimagecenter

Ways to eliminate undesired margin

I am struggling with formatting an HTML list into columns and I can't seem to remove the space between each column. It's frustrating because I want the list to display like rows, without any spacing or at least the ability to control the size of ...

htmlcsshtml-lists

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

I am struggling to add an extra class within the div class= "container-fluid" in order to set a background with a fixed position, but it doesn't seem to work. The only way I can add a background-image is directly in the HTML. Why is that? Another is ...

htmlcss