The problem with div height, the div is not extending to cover the entire body

I am currently working on a slider panel that covers the full height when opened. However, I have encountered an issue where the height remains fixed and the full content is not displayed when setting the body overlay to hidden. More information can be found at 

body{
      background-color:#FFF;
      height:100%;
     width:100%;
     margin:0;
      color:#ccc;
      font-size:3em;
      line-height:100px;
      text-align:center;
     overflow:hidden;
    }
    .slidernav{
      background:#000;
      position:absolute;
      width: 100%;
      height:100%;
      top: 0;
      right:-100%;
      z-index:9999999999999999999999;
      overflow:hidden;
    }

html

<html>
<body>
<div class="slidernav"><div>
</html>
</body>
htmlcss

Answer №1

To improve the styling, try using overflow-x:hidden; instead of just overflow:hidden;

Answer №2

When using overflow: hidden, there can sometimes be issues that arise. Below is a recommended solution:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }
<html>
<body>
<div class="slidernav clearfix">
  
<div>

</body>
</html>

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

Customize Google Chrome to display a vibrant splash screen instead of a boring white blank page when

"I've been on the lookout for Chrome apps that can help make my screen darker or inverted to reduce eye strain. While I have found some apps that do the job, there's one thing they don't seem to be able to override - the White Blank page. W ...

javascriptjqueryhtmlcssgoogle-chrome

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

javascripthtmlcssajax

Integrating fresh fonts into TinyMCE's font selection choices

I recently reviewed a thread regarding Google Fonts and TinyMCE, and I have successfully added new fonts to TinyMCE in the past. However, I am currently facing an issue where I am unable to add a new font called "Samman" that I obtained from MyFonts.com. ...

cssfontstinymcefont-face

Is there a way to eliminate the black bar appearing on my progress bars in Chrome due to a glitch?

I've created a simple slideshow with a progress bar that functions as a 5-second timer before moving to the next slide. However, there's a strange black section on the progress bar in Chrome that I can't figure out. Here you can view the cod ...

jqueryhtmlcss

relocate the figcaption below the image on mobile devices

Currently, I am in the process of updating an old website to make it responsive, and I have encountered several challenges along the way. My goal is to have the fig captions displayed on the right side in the desktop version, but underneath the figure in ...

javascripthtmlcssbootstrap-4figcaption

Obtaining a string from a regular expression does not function as anticipated

Currently, I am in the midst of a project that requires me to identify specific HTML tags and replace them with others. To accomplish this task, I am utilizing JavaScript, and the code snippet looks like this: // html to update html = '<div cla ...

javascripthtmlregex

Secure Your PHP Accounts

My current website hides the account window where users can change passwords, upload files and more using a simple code snippet: <?php if($is_logged_in) { ?> <div id="account_window"> //content </div> <?php } ?&g ...

phphtmlsecurityauthenticationcode-injection

What measures can be taken to safeguard this hyperlink?

Is there a way to conceal HTML code from the source code? For instance: jwplayer("mediaplayer").setup({ file: "http://example.com/Media.m3u8", autostart: 'true', controlbar: 'bottom', file: "http://exa ...

javascriptphphtmljwplayer

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

The form will be submitted even if the validation conditions are not met, and the form

I've been struggling to understand why this issue keeps occurring despite hours of unsuccessful research. Here's the code for a registration page that submits the form regardless of the conditions being true or false. I've experimented with ...

javascriptphphtmlajaxforms

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...

javascripthtmlcss

Form submission causing page to reload, getElementById function fails to return value, rendering form ineffective

The objective of this code snippet is to extract data from a form using IDs and store it in an array object named studRec. The entire process is intended to be carried out on the client-side in order to preserve the data for future use in other functions. ...

javascripthtmladdeventlistenergetelementbyidarrayobject

What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...

htmlcss

Design a styled rectangular tab using CSS

Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below? While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div ...

csstabs

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Within my image-wrapper container, I have an image with a variable resolution. The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow e ...

htmlcssobject-fit

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Ensure that PHP form validations are checked when submitting the form using jQuery

I have created a form in HTML with basic verification. Here is the code: <form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form"> <input class="form- ...

javascripthtmljquery

mysterious glitch within my code

Accidentally inserted the following code snippet <style type="text/css"> into my Top_menu.css file due to a copy and paste error, forgetting to remove it. Now trying to delete all the code will crash everything!!! Here is my Top_menu.css file: ...

htmlcss