Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only displays as single lines matching the text height. Thank you.

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>

<body>
<div style="overflow: hidden; clear: both;">
    <div style="background-color: blue; height: 70%;">Top</div>
    <div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>

</html>
htmlcss

Answer №1

In order to ensure the layout properly fills the screen, it is important to set the height of both the body and html elements to 100%. Additionally, the outer div should also have a height of 100%.

Here is an example of how this can be achieved using CSS:

body, html { height: 100%} 

<div style="overflow: hidden; clear: both; height: 100%">
    <div style="background-color: blue; height: 70%;">Top</div>
    ...

Answer №2

It's not possible to achieve this using CSS, and for a very valid reason. Without specifying a height for the body element, it will automatically adjust its height to fit all of its children. If you then use percentage-based units for the children's height, they will be calculated based on the parent's height.

This creates a situation where the parent's height relies on its children's height, and vice versa - leading to an infinite loop!

On another note, following Fred's approach might work if your concern was around setting a static height. Trying setting the height to 100% as a potential solution.

Answer №3

To achieve full width and height of a parent div, you can add position: absolute to it. Make sure to include width: 100% declarations as well to enforce block-level formatting context.

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

Check out the fiddle for reference.

Keep in mind that using absolute positioning will remove the element from 'normal flow', potentially causing overlapping with sibling elements. The CSS 2.1 spec advises on this issue:

...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

Answer №4

Regrettably, in order for the 70% - 30% ratio to function properly, you must specify a fixed height for the parent DIV.

An alternative approach is to utilize JavaScript to determine the height of the window and subsequently assign this value to the parent DIV. By doing so, the percentages will be able to adjust accordingly as they now have a frame of reference for resizing.

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

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

"Despite having an updated browscap.ini file defined in php.ini, the function Get_browser is still returning unexpected

These are the steps I have taken so far: Downloaded the updated php_browscap.ini file from (chose the PHP version) Tested php_browscap.ini, lite_php_browscap.ini, and full_php_browscap.ini. Updated the php.ini file to: [browscap] ;http://php.net/bro ...

phphtmlvb.netphp-inibrowscap

Manipulating HTML content with Javascript Array

Is there a way to retain Javascript context from an array? Any suggestions for improving this code? SAMPLE: <html> <script type="text/javascript"> var rand = Math.floor(Math.random() * 6) + 1; var i = Math.floor(Math.random() * 6) + 1; var ...

javascripthtmlarrays

JavaScript functioning exclusively for specific list items within an unordered list

After implementing JavaScript on my website, I noticed that it only works when clicking on certain list items (li's) and not on others. Specifically, the functionalities for Specialties, Contact Us, and Referral Schemes are not working correctly. ...

javascriptjquerycss

Angular 4: preventing button click until form validation is successful

I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...

htmlangularforms

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

jqueryhtmlangularjstwitter-bootstrapangular

Utilize ngModel within the <p> element in Angular 8

Here is some HTML code for displaying card information: <div class="col-md-4" *ngFor="let card of allCards"> <p class="card-text">Card Color: {{card.color}}</p> <button type="button" class=" ...

htmlangular

What is the method for displaying an array in JavaScript?

When a user clicks the value 3 input box, three input boxes will appear where they can enter values. However, when trying to submit the array, no elements are printed and an error message "Element is not defined" appears. var arr = [0]; function get_va ...

javascripthtml

Is it possible to execute a function within an HTML page simply by clicking on it?

As someone who is new to the world of HTML, CSS, and JS, I'm currently facing a challenge: On my website's page1.html, I have implemented a feature that allows users to sort different articles on the page by selecting a sub-menu from the navigat ...

javascripthtmlcss

Issue with CSS min-height causing divs to not align properly

My CSS Code includes media queries to adjust the layout: .clearfloat { clear: both; font-size: 1px; height: 0; line-height: 0; } .box-container { width:100%; text-align:center; } .icon-box { width:32%; max-width:500px; ...

htmlcss

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascriptjqueryhtmlcss

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

javascriptpythonhtmlflaskstripe-payments

Refreshing a HTML table by retrieving data from a session variable

I'm still learning the ropes when it comes to JSP, jQuery, and AJAX. I have a JSP page that utilizes a table populated with values from a List variable stored in session. Below is the code snippet: <table id="someData" class="display" width="95%"& ...

jqueryhtmlajaxjsp

`In Firefox, perspective can lead to unexpected overflow errors.`

Having difficulties setting up a parallax effect using CSS perspective and translateZ. Encountering strange overflow errors specifically in Firefox. Check out the issue here When moving the mouse around, noticing that the background-image is getting crop ...

cssfirefoxperspective

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Let me explain, I have a form that includes a span and an input: <form onSubmit={e => handleSubmit(e)}> <Box className='form_box'> <span> <a href="/cd ...

htmlcssreactjsmaterial-ui

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

javascriptcssreactjsmaterial-ui

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

The width of DIVs in Mac Safari exceeds that of other browsers

Encountering an issue that is specific to MAC Safari. Here's the code snippet: <div class="wrapper" style="max-width:1220px"> <div style="width:50%;display:inline-block">First</div> <div style="width:25%;display:inline-block"&g ...

htmlcss

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css