Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width.
Is there a way to specify the width of an inner element as a percentage of the overall Body width, rather than the default behavior?
Extra Details: The Body width can vary depending on the device. If the device width is above 1440px, the Body width will be set at 1440px; for smaller devices, the Body width will be set to 100%.
It's not recommended to customize your <body>.
Instead, create a container using a combination of viewport units and max-width.
.container {
width: 100vw;
max-width: 1440px;
height: 100vh;
margin: 0 auto;
background-color: green;
}<div class="container"></div>One way to achieve responsive design is by utilizing viewport units.
<div class="container"> /** Width:900px; **/
<div class="box"> /** 100% of BODY, not of parent div **/
</div>
</div>
<style>
.container {
background-color: blue;
width:30%;
padding: 20px;
}
.box {
background-color: yellow;
width: 100vw;
}
</style>
Alternatively,
You can determine the width of the body using JavaScript and assign a percentage of that width to other elements.
Get body width:
document.body.clientWidth;
Assign width to HTML element:
document.getElementById('element_id').setAttribute("style","width:500px");
To ensure that an element's width always matches the width of the body, you can utilize viewport units.
For example, 1vw corresponds to 1% of the width of the viewport's initial containing block, typically the body itself.
If you aim for something to occupy 20% of the body's width, you simply need to set its width to width: 20vw.
This approach remains consistent regardless of how deeply nested the element is within the DOM, as it adjusts proportionally to the screen size at the time of page load.
For further insights on viewport units, check out: https://css-tricks.com/fun-viewport-units/
When I define an input element with the following CSS properties: input { border: none; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; padding: 0; } I anticipate the height of the input to be 16px, however, upon inspecting ...
Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...
I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...
A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...
My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...
I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...
My website looks great on all browsers except for Internet Explorer. I am currently using Internet Explorer 8 to test it. I've tried using a conditional stylesheet (ie.css) to fix some issues, but there are a few problems that have me stumped. I am op ...
There seems to be some confusion regarding the default orientation of the iPad. While some believe it is portrait (which is how I typically use my iPad), others argue that it is actually landscape. In my CSS, I have specific settings for targeting elemen ...
The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...
This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...
Looking to rotate a div towards a point using the CSS 3 transform rotate function. Progress so far: View code on JSFiddle $(document).ready(function(){ var scw,sch,scx,scy; calcCenter(); $(window).resize(function() { calcCent ...
One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...
I'm having trouble getting the row height to change using fr units in my grid-template-rows. It seems to work fine with other units like pixels, but not with fr. I find it confusing that the fr units work perfectly fine with grid-template-columns, so ...
I have an API endpoint that provides image files in raw data format. How can I display this image data on a website using the img tag or CSS background-image property, without utilizing canvas? One possible approach is shown below: $.get({ url: '/ ...
I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...
My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...
I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...
I'm struggling to position my text in a specific area within a column using CSS. Our app displays a price when a quantity is selected, but I can't seem to center the $14 under 'Item Total'. Even using float: center; hasn't worked f ...
I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the ...
Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...