Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

My approach to beginning a new design always involves overriding the default padding and margin set by the browser on all elements:

* { margin: 0; padding: 0; }

After coming across j08691's response regarding a margin collapse issue, I discovered that setting overflow: auto resolved more issues than anticipated. This made me wonder if it would be beneficial to include overflow: auto for all elements within the html (the scroll bar should not go missing). Therefore, I added:

html * { overflow: auto; }

I implemented this rule in one of our websites, and initially, it seemed to work fine. However, I have concerns that it may cause compatibility issues with less common elements (which are not currently being used but could be in the future) as well as ... Internet Explorer.

Has anyone experimented with a default overflow: auto? Is it considered problematic? Would it be wiser to apply a more targeted version by defining a default overflow: auto solely for div elements?

htmlcssoverflow

Answer №1

Personally, I believe it is not the best practice. It's better to only utilize it in cases where you are uncertain if the content may exceed the size of an element.

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

Why isn't the background color displaying for the child text element during animation?

My search boxes are arranged in a grid layout with the use of the display: grid property. When I click on or focus on the <input type="text"> elements in column 1, the text elements within the <span> tag with class names placeholder2, ...

htmlcssflexboxcss-animations

Issue with triggering the change event for <select> tag

Whenever the selected value of the drop down changes, the following code does not work as expected. Please make corrections if any errors are present. <!doctype html> <html lang="en"> <head> <meta charset="utf-8</scri ...

javascriptjqueryhtml

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

I am working on a form that has an input box which I want to auto-complete with values from an IndexedDb objectStore. Currently, it is functioning with two overlapping input boxes, using a simple array. However, I am looking to make it work with the values ...

javascripthtmlindexeddb

The thickness of an SVG line increases as it is rotated

I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as <path d="M0 -10 20 0" stroke-width="4" st ...

htmlcsssvg

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Upon receiving output in html string format from services, I am presented with the following: "<html>↵<h1>↵Example : ↵<br>Explanation↵</h1>↵<hr>↵<b>key1 : ABCD <br>key2 : 2016-10-18-18-38-29<br> ...

javascriptjqueryhtmltext

"Internet Explorer: Unleashing the Magic of Card Fl

I'm encountering a problem that I can't seem to solve. Everything works perfectly in Chrome, FF, Safari, etc., but in Internet Explorer, I see the image on the front side instead of the text on the backside. Can anyone please assist me with this ...

htmlcss

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Check out this jsFiddle link. Upon opening it, you will encounter a moveable div. However, I am looking to enhance this functionality by allowing the div to disappear if moved to the 'trash' area. Essentially, when you place the moveable div in t ...

javascripthtmlcss

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

When you hover over one box, watch as another magically vanishes

How can I make one div disappear by hovering over another? When I use the code .icon:hover + .info { display:none), it just displays that div underneath instead of making it disappear. I'm not sure if the placement of the divs in the HTML is affectin ...

htmlcss

selectors that seem to be floating

I attempted to line up certain selectors horizontally on the same line using float:left. However, it did not work as expected! Could someone please assist me with this issue? http://jsfiddle.net/6YKhT/ ...

htmlcss

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

Utilize JavaScript to extract content from a text file and showcase it in a Bootstrap modal pop-up through knockout binding

I'm currently working on a function that reads data from a .txt file (located in the website's root directory) and then displays it in a modal dialog box. I believe I've made progress as the file is recognized during debugging, but unfortuna ...

javascripthtmlajaxknockout.jsbootstrap-modal

What should be displayed if there are no search results?

My form for filtering a database is working perfectly in the first section: $result=$dbh->prepare("SELECT * FROM performers WHERE accent='$txt_accent' AND hair='$txt_hair' AND gender='$txt_gender' AND location='$txt_l ...

phphtmlmysql

The font size calculation is larger than the CSS definition on the Asus Nexus 7 device

Running the website on an Asus Nexus 7 (developed in jQueryMobile), I set the font size in CSS to be 14px. However, while debugging using Chrome on my PC, I noticed that the computed size is actually 22px. Here's a snippet of the HTML code: <div ...

htmlcss

What could be causing the <img src= ' '/> tag to malfunction in Express?

While learning about HTML, I noticed that simply using img src="...." worked fine. However, when working with Express, the same code did not work! The documentation mentioned that I needed to place the images in a folder named public, require(&ap ...

javascripthtmlnode.jsexpressserver

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

My canvas with paperjs is set up to resize dynamically when the window is resized. I appreciate any help in advance. HTML <canvas id="myCanvas" height="800" width="1000"></canvas> JS var Initialize = function () { var canvas = document ...

javascripthtmlcanvaspaperjs

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Issues with Bootstrap form functionality

I found inspiration on http://getbootstrap.com and decided to enhance it by including a hidden input. The file result.php contains $_REQUEST. Only the hidden value is visible to me. <form class="form-horizontal" role="form" action="/requests/result.p ...

phphtmltwitter-bootstrap

How to position a div in the center of another div using HTML

I'm struggling to center the bottom div within a container that includes 3 other divs. Despite trying multiple solutions found online, nothing seems to work. This task should be simple, but for some reason, I can't get it right. .container { po ...

htmlcsscenter