CSS: the height of html and body is set to 100%, yet the divs do not automatically adjust their height

My dilemma lies in the realm of web development. Specifically, with the CSS properties affecting the height of my div elements.

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

Despite specifying a height of 20% for my div element,

div { height: 20%; }

I am encountering an issue where the height does not adjust as expected and instead depends on the content within it. I am striving to achieve a fixed height of 20%, but seem to be falling short.

Any guidance or solutions you can provide would be greatly appreciated. Can you help me resolve this? Thanks!

css

Answer №1

It appears that your code should be functional. Feel free to try out the demo provided below:

html, body { width: 100%; height: 100%; }
div{width: 20%}
 <!doctype html>
<html>
<body> 
  <div class="test">
    <p>Lorem ipsum dolor sit amet, dicat oportere in duo, te sea movet nominati. Liber exerci partem ei sed, ius eu denique lucilius expetendis. Pro et consectetuer definitiones, vix id augue singulis quaerendum. Ut vis accusamus reformidans, nam te similique omittantur.

An tincidunt dissentiet per, case timeam vix ad, ad modus affert has. Eu fastidii temporibus accommodare sit, percipit vituperata ne duo. Iriure dissentias te vis, est labore possim meliore cu, doming timeam ne sit. Ei has dico modus definitiones, dolorum atomorum suscipiantur ad eam. Facer mollis prodesset ad vis, est pertinax necessitatibus te. Has id iusto argumentum, ut ullum omnium forensibus vel.

Oblique indoctum vis ut. Eam an elitr ignota. Dico maiorum eu sea. Mel illum eirmod nostrud ei, movet malorum nostrud vel ne. Volumus mediocritatem vis ex, ad nostrum appellantur sea, in paulo aliquando vel.

Ea mea dolor accusam intellegat, adhuc phaedrum ei vis. Nam ea atqui homero salutandi, eu laudem quaerendum per. Cu vim legere graeco, vis facer summo albucius ex, pro utinam vulputate in. Ei debitis offendit qui, debet viris copiosae ius ea.

Nam utinam voluptatibus ex, et perfecto repudiandae nec. Ea dolore ponderum partiendo sea, est an fugit ceteros, te vis suas voluptatibus. Falli iuvaret pro ex. Ius at volutpat posidonium contentiones.</p>
  </div>
</body>
<html>

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

Angular does not employ any Bootstrap styles when rendering

I have successfully installed both Ngb and Bootstrap 4 using the commands provided below, with the root module importing the package as well. npm install @ng-bootstrap/ng-bootstrap --save npm install bootstrap@next --save Within my code, I am attem ...

csstwitter-bootstrapangularsassbootstrap-4

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...

cssangularjs

Is it possible to simultaneously employ two asynchronous functions while handling two separate .json files?

Is it possible to work with 2 .json files simultaneously? My attempt did not succeed, so I am looking for an alternative method. If you have a suggestion or know the correct syntax to make this work, please share. And most importantly, does the second .j ...

javascripthtmlcssjsonrequest

Cursor-hugging tooltip

My tooltip creation works when hovering over an icon, but there's a slight issue - it doesn't always follow the cursor and can get stuck at times. To see a demo of this in action, click here: fiddle Here's the code I'm using: HTML & ...

javascripthtmlcsstooltip

Any tips on getting my Squarespace Cover page video to resize properly?

I recently implemented a cover page with a looping video background on my Squarespace site. The video used to automatically resize to fit the browser window perfectly, but now it seems to be playing at its full resolution. I don't have much experience ...

javascripthtmlcssvideosquarespace

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

Change the appearance of a specific div within a collection of div elements using React

I'm currently working on a visualizer for sorting algorithms where there are colorful bars that will animate when a specific sorting algorithm is triggered by clicking the play button. To achieve this, I created an array of div elements representing ...

cssreactjsalgorithm

When scrolling, a new page loads seamlessly

Recently, I came across a website that has an interesting feature where new content is loaded automatically while scrolling, seamlessly appending to the existing page. What's more fascinating is that not only does the content change, but the URL also ...

javascripthtmlcssweb-applications

Update the background color on the sidebar

Objective: I want to change the background of the class="col-sm-3 blog-sidebar" to match the color shown in the image below. Essentially, I am looking to update the sidebar background to reflect the picture's color. Challenge: How can this be ach ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

My attempts to use `this.scrollIntoView({behavior: "smooth"}) were yielding inconsistent results in terms of where the selected item would land on the page. I believe I might need to utilize scrollTop(), but as someone who is new to jQuery, I am ...

javascripthtmljquerycssscroll

Display full lines of nested tree view HTML lists upon hovering using HTML, CSS, Angular, and Bootstrap

I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would lik ...

htmlcssangularbootstrap-4

Parsing all HTML elements using Nokogiri

I've been searching everywhere and all I could find was how to use CSS selection with Nokogiri. What I really need is to completely remove all HTML tags. For instance, this: <html> <head><title>My webpage</title></head& ...

htmlcssrubyhtml-parsingnokogiri

Implementation of a text field in Reddit using Material-UI

As I attempt to replicate the Reddit text field design from material-ui, I've created a custom component. However, I keep encountering an invalid hook call error when I reach the line containing const classes=.... Here is the code snippet: import Re ...

cssreactjsmaterial-ui

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

cssangularbootstrap-4angular-materialmaterial-design

Issue with React-select: The background color is not extending to the full width when using wordWrap:"scroll"

I am currently implementing react-select in one of my projects. I need the wordWrap property to be set to "scroll". However, when the length of the options exceeds the menu width and I scroll to the right, the hover color does not fill the entire width. T ...

javascriptcssreactjsfrontendreact-select

The button style from Angular Material is only effective when implemented in the app.component

I made the switch to a custom Material theme recently, and I've noticed that everything adopts the new theme except for the buttons in my components. The buttons are functional, as are other elements within the component. Adding color="primary" chang ...

cssangularsassangular-material

What are the differences in rendering between Almost Standards Mode and Standards mode?

After researching extensively, I have found that the main difference between almost standards mode and standards mode is related to image alignment in table cells. However, a particular question on Internet Explorer 8 and Checkbox CSS Problem, has pointed ...

htmlcss

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

htmlcsstwitter-bootstrapbootstrap-4dropdown

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

javascripthtmlcss

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

javascripthtmlcss