Scrollbar Excess in Windows 10 on Chrome Version 76

   <div style="overflow-x: hidden">
      <div style="height: 100%">
        <p style="margin-bottom: 1rem">
          lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida.
        </p>
      </div>
    </div>

https://example.com/code

Can anyone explain why this code displays an extra scrollbar only in Windows 10 and Chrome 76? How can this issue be fixed?

Answer №1

By deleting the height: 100%; from the second div, you will eliminate the scrollbar that appears.

I am curious about the purpose of your nested divs. Could you elaborate on why you are structuring the html in this particular manner?

Answer №2

Try removing the height attribute from that div or adding overflow:hidden to fix it.

 <div style="overflow-x: hidden">
      <div>
        <p style="margin-bottom: 1rem">
          asdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdfsdf dasfd asdf asdf
        </p>
      </div>
    </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

Tips for Keeping a Responsive Image at the Forefront of a Text-Image Layout as You Scroll

I'm currently in the process of creating a website where text appears on the left side with an accompanying image on the right. The challenge I'm encountering is ensuring that as users scroll, the image adjusts dynamically based on the associated ...

How to access HTML content in Python web scraping with a delay?

Currently, I am using Python to scrape the HTML from this site: Upon accessing the webpage, you'll notice that the content changes within a few seconds. This page displays the latest posts on a forum, and my goal is to create a Discord bot that can s ...

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

Check the radio box corresponding to the adjacent label

As a hobby, I have been exploring ways to automate questionnaires that I used to manually deal with for years. It has always intrigued me how best to streamline this process, and now I am taking the opportunity to indulge in my passion and enhance my JavaS ...

How can I display table rows along with their child table rows in Angular?

Is there a way to display API data in a table using Angular? The table should have collapsible rows with nested child rows. This is the JSON file structure: { "collapse1": [ { "name": "Soil", "budget": 12345, "child": [ { ...

What is the best way to adjust a CSS width using the output from a JavaScript function?

I am facing a challenge with a GridView within a div wrapper. The row headers along the left side need to always be visible. So far, this setup is working fine. However, I need the wrapper to have a variable width to adjust to the browser size. Although I ...

How can I align the middle of the element within its parent until it hits the top-left edge, at which point should I stop center

I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...

Update the href attribute when a button is clicked

Note: The buttons in the corner will not be submitting the search. The go button would still need to be clicked to submit it. Currently, I am working on a fun project during my free time at work. This project is not meant to be anything serious, but rathe ...

Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet: h2.titulo { width: 100%; margin: 10px 0; padding: 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; display: block; color: ...

Retrieve content inside an iframe within the parent container

Hey there! I've been working on adding several iframes to my webpage. Each iframe contains only one value, and I'm trying to retrieve that value from the parent page. Despite exploring various solutions on Stack Overflow, none of them seem to be ...

AngularJS errorCallBack

I'm currently struggling with AngularJS and would really appreciate any constructive assistance. Below is the Angular code snippet I am working on: app.controller('customersCtrl', function($scope, $http) { $scope.element = function(num ...

The jquery script tag threw an unexpected ILLEGAL token

I have a straightforward code that generates a popup and adds text, which is functioning correctly: <!DOCTYPE html><html><body><script src='./js/jquery.min.js'></script><script>var blade = window.open("", "BLA ...

What could be causing the removeChild() method to fail when trying to delete a list item in JavaScript DOM manipulation?

Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

Show identification as an alternative term in the chart

Is there a way to display an id in a table cell as another name from a different object with corresponding ids? I want to achieve something like this if it's possible: <td class="tableRowText"><p>{{l.SenderId}}</p></td> simil ...

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

The issue of jumpy CSS background on full screen mode for mobile devices is causing

While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...

Issue with Retrieving the Correct Element ID in a Loop with JavaScript Function

I'm in the process of developing a dynamic wages table with HTML and JavaScript to compute each employee's wage based on input from each row. In order to achieve this, I've utilized a loop to assign a unique ID to the total cell in every ro ...

Box size adjusts to fit its content, including any form fields

Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...