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

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

javascripthtmlcss

Using only CSS to swap out periods in OL>LI elements for a different style

Is there a way to customize the punctuation used in lists in HTML and CSS? For instance, can the standard period at the end of list items be changed to a right parenthesis or removed altogether? Concept Below is an example of improper CSS attempting to a ...

htmlcssstyleshtml-lists

Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful. Check out the exa ...

htmlcssvue.jssvg

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

javascriptphphtmlwordpresswoocommerce

Error message: Python HTML Parsing with UnicodeDecodeError

When utilizing html.parser from the HTMLParser class to extract data from a set of html files, everything works smoothly until an error is triggered by a specific file: UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8a in position 41 ...

pythonhtml

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...

javascriptjqueryhtml

Cross-domain scripting with JavaScript

I currently manage 2 subdomains securityservices.example.com workstations.example.com All workstations are associated with the workstations.example.com One of the workstations, known as WS789012 on the domain, is fully qualified as: WS789012.workst ...

javascripthtmlajax

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Receiving Null Value Upon Asynchronous API Call Before Data Retrieval

Struggling with Fetching and Displaying API Data in a Table I am facing a challenge where I need to fetch an API multiple times and populate the data into a table. The issue arises when the data for a specific year is not available, causing the table to b ...

javascripthtmlreactjs

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

As I was wrapping up this task, an unexpected error popped up: Module not found: Can't resolve './components/Post' in ./src/pages/index.js I've tried everything to troubleshoot it but no luck. Here's a rundown of my code snippets ...

javascripthtmlcssreactjsreference

A guide on customizing the appearance of individual items in a vue v-for loop based on specific conditions

I am currently developing a multiple choice quiz game and I want the selected answer by the user to change color, either red or green, depending on its correctness. To achieve this, I have created a variable called selected that correctly updates when the ...

javascriptcssvue.jsvuejs3v-for

Finding the index of a selected option in node.js can be achieved using express

I am trying to retrieve the index of the selected object using Express and log it in app.js example.html <form id="tableForm" action="getJson"> <select class="example" name="example"> <option name="table1" value="1"& ...

htmlnode.jsexpressejs

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

Annoying animation triggered upon loading of the page using AngularJS

I'm encountering an issue with a webpage element that has a hide/show animation. Despite the initial state being hidden, when the page loads, it still displays the hide animation. I attempted to set ng-show="false", but the hide animation persists upo ...

htmlangularjscss-animations

Guidelines for Implementing Stylesheets from a Referenced Node Module

I am currently developing a VS Code module that incorporates highlight.js to produce HTML for syntax highlighting of source code. Within the highlight.js npm package, there is a directory named styles containing various CSS files that I intend to utilize. ...

cssnpmvisual-studio-codevscode-extensions

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...

htmlcsslayout

"Android Webview's evaluateJavascript function is not returning the expected value

I am attempting to retrieve the username from a webview, but it is returning a null object. webView.settings.javaScriptEnabled = true webView.evaluateJavascript( "(function() { return document.getElementsByClassName('lgn-loginname') })() ...

javascriptandroidhtmlkotlinwebview

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: I want a layout that spans the full width, regardless of the Chrome wind ...

cssvue.jsvuejs3bulma

Incorporating external libraries is seamless when used in a .html document, however, they may encounter limitations when integrated

I am facing an issue while migrating my code from an .html file to a Quasar project. The code runs perfectly fine in the .html file, but I encounter errors when implementing it in Quasar. Here is the original code from the index.html file: <!DOCTYPE ht ...

htmlvue.jsleafletreact-leafletquasar-framework