Create a DIV element that completely fills the vertical space available

My webpage is currently looking quite empty, with only one DIV element present:

<div style="height: 20%;
            min-height: 10px;
            max-height: 100px;
            width: 100%;
            background-color: blue;"></div>

I'm wanting to insert a new DIV element after this existing one that will fill up all the remaining vertical space on the page. Can anyone guide me on how to achieve this?

This CSS challenge has been consuming my whole day, and I must admit, it's starting to make me feel slightly crazy.

csshtml

Answer №1

What should be included within this particular div?

If it's simply a placeholder for color, you can nest your blue div inside another div with a background color and ensure that it spans 100% of the browser window.

This arrangement will create the appearance of two stacked divs. If you require additional content, you can easily add another div below the blue one containing whatever content you desire.

EDIT: Check out this code example: http://jsbin.com/efefe/2

Answer №2

Imagine you have a scenario with two divs:

<div id='one'></div>
<div id='two'></div>

In this setup, #one has a variable height while #two needs to take up all the remaining vertical space. To achieve this, you can use the following CSS:

/* Consider using a container div instead of body */
body {
  display: flex;
  flex-direction: column;
}
#one {
  flex: none;
}
#two {
  flex: 1;
}

Additionally, if you desire #two to be scrollable, you can include the following styles:

height: 100%;
overflow-y: scroll;

This will enable vertical scrolling for #two in order to view its entire content.

For more information on display:flex, check out this resource.

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

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

htmlcsscss-grid

Ways to make a button blink using AngularJS

Currently working on an AngularJS SPA application where a button is present in the front-end HTML page. When this button is clicked, it triggers an operation which takes some time to complete. I want to inform the user that the operation is still in prog ...

javascriptangularjshtmlcss

I'm facing an issue where TailwindCSS fails to stretch my VueJS application to full screen width

My components are all contained within a div with classes flex-row, w-screen, and content-center. However, when I switch to reactive/mobile mode on the browser, it only takes up about 2/3 of the screen and doesn't fill up the remaining space. Below i ...

javascripthtmlcssvue.jstailwind-css

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

phpjavascripthtml

Unable to assign a value to a data attribute using jQuery

For some unknown reason, the code $('element').data('data_attribute_name', 'value'); is not functioning properly in this scenario: Here is the HTML structure: <ul class="main_menu__list" data-scheme="light"> ... </u ...

jqueryhtml

Tips for altering the distance between dots on a line

.ccw--steps { margin: 10px auto; position: relative; max-width: 500px; } .ccw--step-dot { display: inline-block; width: 15px; border-radius: 50%; height: 15px; background: blue; border: 5px solid #e8e8e8; position: relative; top: -8p ...

htmlcss

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

javascripthtmlcssreactjsmaterial-ui

planning to append the author's name to the end of the title using CSS

Here is the HTML code I have: <div class='store_detail-level1'> <span class='book_name'>How To Avoid Climate Disaster</span> <br> <span class='author_name'>Bill Gates</span> < ...

css

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

htmlcssflexbox

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

My form includes 4 checkboxes for different mathematical operations. <form action="" method="POST"> Select number of questions: <input type="number" name="que" value="que"> <br> <br> Select number of series: <select name="sel ...

javascriptphpjqueryhtml

I am looking to set an HTML file as the homepage for my Next.js project

Is there a way in next.js to render a normal .html file (index.html) when someone visits my root directory at "https://example.com/"? I have researched and edited my config file as shown below, /** @type {import('next').NextConfig} */ const next ...

javascripthtmlreactjsnext.js

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

javascripthtmlangularjs

JQuery isn't functioning properly on dynamically generated divs from JavaScript

I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here: Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hov ...

javascriptjqueryhtmlcss

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

javascriptphphtmlmysqlajax

Create dynamic Bootstrap 4 menus featuring three levels of navigation - the initial dropdown sub-menu may not display any selectable options

Using Bootstrap 4 and jQuery 2.2.4, I've created a navbar with three layers of menus, comprising two levels of drop-downs from the top-most level. Everything works smoothly except for a glitch on mobile devices. The menu collapses to the hamburger ic ...

cssbootstrap-4

Diverse Values within the Inner Border

Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...

css

Is there a way to ensure a grid container occupies the entire page?

Having trouble getting my grid display to cover the full size of the page. I have a grid with three columns controlled by two elements but it is not taking up the entire screen as expected. How can I make the grid fullscreen? .wrapper { display: grid; ...

htmlcss

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

I am completely new to CKAN and front-end development. I've been scouring through various html/css files without success in locating where I can adjust the field sizes in the resources form (where users can modify metadata via GUI). I would like to r ...

htmlcssckan

Find all relevant employee information at once without the need for iteration

I have structured two JSON arrays for employee personal and company details. By inputting a value in the field, I compare both tables and present the corresponding employees' personal and company information in a unified table. <html> ...

javascripthtml

Tips for integrating Rate Yo into the database

I have been attempting to integrate Rate Yo into the database, but I am consistently encountering an error message: Undefined index: rating in C:\xampp\htdocs\bill\bill\add_rate.php on line 57 Below is the code that I have trie ...

phphtml