How is it that I am successfully configuring the dimensions of divs using percentage values?

Hey guys, I'm starting to get a bit frustrated because I can't figure out why I am able to set the height of divs in percentage. I read on a website that setting the height of divs in percentage doesn't work unless it's a child div. So why am I able to set the height of elements in percent even when there is no parent div involved?
Here is how my css code looks:

html,body{                                      
 width:100%;                                     
 height:100%;                                    
 font-family:Verdana;
 color:#fff;                                     
 backgroundd:#151515;                             
}

Can someone please explain why this is happening? I'm really curious to understand why percentage height works when it shouldn't, this doesn't seem right, does it?

Answer №1

If the main parent element... body has a width and height set to 100% (representing the browser frame, then the html element should also have its width and height set to 100%), resulting in any children elements of the body being positioned relative to it.

html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

.container {
  height: 50%;
  width: 50%;
  
  background: black;
}
<body>
  <div class="container">test</div>
</body>

This is precisely the expected behavior.

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

Explore all attributes of a specific tag in BeautifulSoup to locate a particular word

As I was working on a web scraping project to extract prices from a specific website, I encountered a coding challenge. Here is the code snippet I used: price = soup.findAll(['div'],{'class':re.compile(r'(.*?price.*?)',re.IGN ...

Different methods for modifying the height of an Angular datatable in response to the data provided

Encountering an issue with adjusting the height of a datatable when calling a webservice to populate it. A webpage features a collapsible div element alongside a datatable. Upon collapsing the div, the table's height is calculated and resized using i ...

Creating a dropdown menu in AngularJS using the ng-repeat directive

I have recently started working with AngularJS. I am trying to create three tickets using ng-repeat, each containing a dropdown list to select the number of tickets. However, I am facing an issue where the selected number is not displaying in the span. Can ...

Insert HTML code that is activated when the selection is modified

I have a simple dropdown menu in my HTML code. HTML <select name="breed" onchange="breedChanged()"> <?php while ($row = gdrcd_query($result, 'fetch')){ ?> <option value="<?php echo $row['id_breed']; ?& ...

Troubleshooting issues with adding CSS classes in jQuery intermittently not functioning

I need to detect a specific class from a color picker and then change the class of a header tag. // To locate the specific header id with the 'bgt' CSS class. Detecting the id from a div that contains the '.ss' CSS class. $(document.b ...

Fetching information using JSON for creating a RangeArea Chart with CanvasJS

I'm currently working on creating a range area chart with CanvasJS and PHP to fetch data from a database. After setting up the php script to retrieve values from the DB, here's what I have: <?php header('Content-Type: application/json&a ...

Misplacement of HTML head tags

Is it a grave error in this layout that H1 isn't the first rendered head element? Is there any way to correct this issue? Given that both columns have variable lengths, I am struggling to find a workaround. Reference I was requested to provide a ref ...

Switch the position of the checkbox label to the left in a customized Bootstrap checkbox

I am struggling with adjusting the label position for my checkbox. Here is my code: <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" id="location" v-model="checkedLocations" value="location" name="c ...

Scroll the content of a div to the bottom using JavaScript

I'm facing a situation with my code: function scrollme(){ dh=document.body.scrollHeight ch=document.body.clientHeight if(dh>ch){ moveme=dh-ch window.scrollTo(0,moveme) } } However, I am looking for a way to make it scroll only within a specific d ...

Extracting information from an ENORMOUS Array

Let's start with my code snippet, featuring an array: var UserProfiles = [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android ...

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Creating a customized WordPress options panel is an essential task. One of the key functionalities it offers is allowing users to select their preferred colors. To achieve this, I currently follow a method where I utilize a default stylesheet and then appl ...

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

The art of expertly placing the arrow in <details> with CSS

I'm looking to adjust the placement of the arrow within details. I've experimented with using float:left, but when the line is too long, like in the example provided, the arrow shifts to the beginning of the line below when I resize the window. I ...

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

Creating Dynamic Videos with PHP and HTML

Trying to display the user-submitted video, but all my attempts failed for some reason: 1. echo "<video width='500px'>"; echo "<source type='video/mp4' src=$var autoplay>"; echo "</video>"; echo "<video width=& ...

Tips on how to automatically scroll a display flex div to the bottom

Traditionally, setting scrollTop of a div can be used to scroll it to the bottom, as shown in this example: http://jsfiddle.net/jPVAf/50/ However, if the div has the style display: flex, the technique mentioned above will not work. Here is an example demo ...

The slider image on my Bootstrap website is not properly displaying on mobile devices

Check out my bootstrap website which features a slider: here Although the slider image is displaying correctly on desktops, it's not fitting properly on mobile devices. I've tried adjusting the CSS with the following code: @media only screen ...

Lottie's functionality is altered on iOS but functions perfectly on Windows and Android

I've been experimenting with a Lottie/iframe combination and trying to learn JavaScript in the process. Please excuse any messy code. To initiate a Lottie animation and display a YouTube iframe (autoplay & unmuted), I used a button positioned on ...

"Upon submission, the form will display results within the designated div container

After struggling for a few days and editing some codes, I finally managed to send my form data to process.php without reloading the page. I am using a bootstrap layout and want to avoid the page reload or redirection to process.php. The HTML form works pe ...