Currently working on designing a website with a fluid layout. Trying to utilize percentages as measurements in order to achieve this. From my understanding, percentages are calculated based on the parent element. Given that HTML tags do not have a set width, how does the body tag determine 100% width? Does 100% mean it takes up the entire screen resolution on which the page is being viewed?
Appreciate any clarification, thank you.
To uncover the solution to your query, it is imperative that you delve into the specifications:
According to https://www.w3.org/TR/CSS22/visudet.html#x3, percentage widths are defined as follows:
<percentage> Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.
Regarding containing blocks:
The link at https://www.w3.org/TR/CSS22/visudet.html#containing-block-details explains:
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element refers to <html> (https://www.w3.org/TR/html-markup/html.html).
The screen falls under the category of continuous media.
The association between viewport and canvas is straightforward:
https://www.w3.org/TR/CSS22/visuren.html#viewport https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally provide users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may alter the document's layout when the viewport is resized (refer to the initial containing block).
If the viewport is smaller than the canvas area where the document is displayed, the user agent should offer a scrolling mechanism.
In essence, the canvas size accounts for content even if it extends beyond the browser window.
The viewport encompasses the browser window without menus, scroll bars, or status bars.
Hence, if <body> has a 100% width, it would mirror the width of the <html> element, equivalent to the viewport's width.
You can easily ascertain the viewport width by examining the CSS properties of the <html> element using Chrome's inspection tool.
When the body tag is set to 100% width, it will expand to inherit the full width of the html element, ultimately filling the entire width of the viewport. This means that on desktops, it will match the browser window's width, while on mobile devices, it will align with the screen width.
If you're looking to determine the width using HTML and CSS alone, you may find yourself coming up short. To accurately measure the width, it's recommended to incorporate Javascript into your approach. Alternatively, utilizing a robust framework such as Vue.js could provide an efficient solution for retrieving the body's width.
With Vue.js, the code snippet would appear similar to this:
this.$el.clientWidth;
For further details, explore more information about this technique here.
Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...
I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...
When working on uploading a file asynchronously using HTML5 in MVC3, a common issue arises when dealing with large files such as 1GB. If the upload process is cancelled or the browser is closed at 50% completion, a 500MB file still gets saved in the target ...
One of the challenges I'm facing is aligning a button to the right side of a column while still utilizing d-none to control its display. Previously, I used d-flex justify-content-md-around justify-content-lg-end for alignment before adding d-none, but ...
Is it possible to select text from a list and insert it into a text box by clicking on it? I have developed a JSON API that retrieves a list of individuals from the database. Following this, there is a form with a text field that displays the list of peopl ...
I am working on an Angular project that does not include Jquery. I am trying to implement a navbar using mdbootstrap, but I am encountering issues with the collapse feature not working properly. Below is the HTML content I am using: <header> < ...
Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? Thank you, Carolin #content_row{ margin-top:150px; margin-left:10px; margin-right:10 ...
Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...
I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...
The display of input fields is inconsistent between IE (version 11) and Chrome (version 46.0.2490.71) when using the min option in the HTML input tag. In Chrome, the input fields appear extra long, while in IE they display correctly (same as when min is no ...
Good day! I have implemented this code to create a flip effect on the blocks of my website: .tegels { /*position:relative;*/ width:25.2%; height:37.4%; overflow:hidden; float:left; margin-top:3.5vw; margin-bottom:0px; m ...
Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...
I'm having an issue with my code where the 'name' variable is POSTed but the 'project' variable is not when submitting through an 'onchange' event. I need both variables to go to session variables on submit. Can anyone sp ...
I am currently working with a more simplified calculator script that looks like this: $('input').keyup(function () { // run whenever the value changes var firstValue = parseFloat($('#first').val()) || 0; // retrieve field value var sec ...
A question for the community: So, I have a website that's totally above board and legitimate. Lately, I've noticed some shady characters trying to register from email domains like Proton and Hush - yikes! Before I dive into PhoneText validation, ...
I've been working on a project to create a web page that provides links to online PDF files. When you click on these links, the file should be saved locally and its name/path added to local storage. I then aim to display all the saved files by iterati ...
I'm working on a project that involves using multiple templates, but I've run into issues with conflicting CSS links from different templates. I want to ensure that the CSS link from one template only affects a specific HTML card without impactin ...
I am trying to dynamically add a rule to my CSS for each element. Each rule should have a different background-image and name. However, I seem to be encountering an issue where the dynamically added div is not linking to the dynamically added CSS rule. I&a ...
I currently have a website that displays a table of elements, each with its own set of sub-elements. On another page, I can view the element along with multiple tabs for its corresponding sub-elements. The current setup is depicted as follows: <a clas ...
I am facing an issue with displaying two tables side by side. Whenever the width of the first table is too large, the second table is pushed below it. https://i.sstatic.net/w8zwp.png https://i.sstatic.net/SZdZU.png Is there a way to make them stay side b ...