Expanding Height in CSS Box Layout

I am struggling to create a Box Layout that expands all the way down to the bottom of the display. I have tried using height : 100%; and min-height: 100%;, but the boxes still do not stretch to the bottom.

Is there a solution to make these boxes expand from the top to the bottom, similar to how they expand from left to right?

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height:100%; 
    min-height:100%;
    position:relative;
}
 
.columnsmall {
    float: left;
    width: 22%;
    padding: 10px;
    height: 40px;
}

.columnmiddle {
    float: right;
    width: 34%;
    padding: 10px;
    height: 40px;
}

.columnbig {
    float: left;
    width: 66%;
    padding:10px;
    height: 80px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
<!DOCTYPE html>
<html>
<body>

    
<div class="row">
  <div class="columnbig" style="background-color:#ddd;">
  </div>
  <div class="columnmiddle" style="background-color:#aaa;">
  </div>
  <div class="columnmiddle" style="background-color:#ccc;">
  </div>
</div>

<div class="row">
  <div class="columnsmall" style="background-color:#aaa;">
  </div>
  <div class="columnsmall" style="background-color:#bbb;">
  </div>
  <div class="columnsmall" style="background-color:#ccc;">
  </div>
  <div class="columnmiddle" style="background-color:#ddd;">
  </div>
</div>

htmlcss

Answer №1

If you want an easy way to manage the height and width of your layout, consider using flexbox along with percentage or viewport height values.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  position: relative;
}

.row {
  height: 70vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}

.row:nth-child(2) {
  height: 30vh;
  flex-direction: row;
}

.columnsmall {
  width: 20%;
}

.columnmiddle {
  min-height: 50%;
  width: 40%;
}

.columnbig {
  height: 100%;
  width: 60%;
}
<div class="row">
  <div class="columnbig" style="background-color:#ddd;">
  </div>
  <div class="columnmiddle" style="background-color:#aaa;">
  </div>
  <div class="columnmiddle" style="background-color:#ccc;">
  </div>
</div>

<div class="row">
  <div class="columnsmall" style="background-color:#aaa;">
  </div>
  <div class="columnsmall" style="background-color:#bbb;">
  </div>
  <div class="columnsmall" style="background-color:#ccc;">
  </div>
  <div class="columnmiddle" style="background-color:#ddd;">
  </div>
</div>

Answer №2

Simply Include:

min-height: 100vh;

This will establish the minimum height equal to the size of the viewport (display).

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

Position the text in the center of a graph within a grid cell by utilizing dash and plotly

Is there a way to center text over a graph within a cell of a grid table using dash and plotly? I'm struggling with the alignment currently, as the graph is not centered while the text appears centered in the view but not in the cell itself. You can ...

pythoncssgridplotly-dash

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type

I have a textarea on my website that allows users to submit comments. I want to automatically capture the date and time when the comment is submitted, and then save it in a JSON format along with the added comment: After a comment is submitted, I would li ...

javascriptangularhtmltypescriptangular6

Create images from HTML pages with the help of Javascript

Hello there, UPDATE: I am looking to achieve this without relying on any third-party software. My application is a SAP product and installing additional software on every customer's system is not feasible. The situation is as follows:   ...

javascripthtmlimagesap-bsp

Check for the occurrence of the key "delete" being pressed using angularJS

Hey there, check out this code snippet I have: angular.module("myApp", []).controller("myController", function($scope) { $scope.pressedKey = function(keyObj) { $scope.myKey = keyObj.key; } }); <script src="https://ajax.googleapis.com/ajax/lib ...

htmlangularjskeypress

Creating duplicates of elements and generating unique IDs dynamically

I'm in the process of cloning some form elements and I need to generate dynamic IDs for them so that I can access their content later on. However, I'm not well-versed in Jquery/Javascript and could use some guidance. Here's a snippet of my ...

javascriptjqueryhtml

Is there a way to retrieve the height of an image and adjust its parent container height to be automatic?

Is there a way to achieve the following using pure JavaScript instead of jQuery? I want to find the height of an image within a figure element and if the image's height is less than 200 pixels, I need to set its container's (parent's) heigh ...

javascripthtmlcss

Tips for Automatically Populating Content in The Quill Js Editor Within Angular

Seeking some assistance. In my Angular application, I have received data from an API. I am trying to prefill the Quill Editor input box with the obtained data, but unfortunately, it doesn't accept the value attribute. This approach didn't work: ...

javascripthtmlangulartypescript

Chrome accepts PHP code, yet IE does not support it

In Chrome, the database list appears in the drop-down box with this code, but in IE it is just listed out without the drop-down box: if (!$result) { /*echo $query;*/ $message = 'ERROR: ' . sqlsrv_errors(); return $message; } else { $i = 0; echo ...

phphtmlforms

Is there a way to create a link in Javascript that directs to a specific div on a new

Is there a way to create a link that not only opens a new page but also automatically scrolls to a specific section within that page? ...

javascripthtmlbrowser

JSON-based Ajax application

I'm having trouble with displaying all the images in my <li> elements. When I use append, only the first image shows up. However, when trying prepend instead of append, it displays the last image only. Can someone please assist me with resolvin ...

javascriptphpjqueryhtmlajax

When a child element with float:left is present, the parent div fails to accurately detect the child's height

The center-content element should adjust its height according to its child elements. However, if I apply float:left to one of its child elements, like the leftContent element, leftContent will extend 95% of its body outside the center-content. This is beca ...

htmlcss

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

javascripthtmljquery

When attempting to execute a PHP program called from an HTML file, the .php file fails to run and needs to be saved

I successfully set up a lamp server on Ubuntu 12.04 by executing the following commands: $ sudo apt-get install tasksel followed by $ sudo tasksel install lamp-server After that, I ran a .php file in my browser which was able to update my database. Her ...

phphtmllamp

Tap on a division to alternate the class of an image

I'm facing a problem with changing an icon when I click on a div. I'm trying to create an accordion element with an arrow icon (using Iconoir) that switches between classes "iconoir-nav-arrow-right" and "iconoir-nav-arrow-down" each time it' ...

javascripthtmlcssimageaccordion

jQuery for validating input fields with positive integers only using regular expressions

I currently have two input fields in my HTML that look like this: <input type="text" class="txtminFeedback" pattern="^\d+([\.\,][0]{2})?$" placeholder="Minimum Feedback"> <input type="text" class="txtmaxFeedback" pattern="^\d ...

javascriptjqueryhtmlregexvalidation

Having difficulties sending the form information

Being new to AngularJS, I created a simple popup where users can add tasks and submit them. There is an "Add task" button that dynamically adds fields for users to enter details into. Below is the HTML markup for my popup: <div class="modal-heade ...

javascripthtmlangularjs

A-Frame Visual Illumination

In my A-Frame AR scene, there is an image (transparent png) that can be moved and resized using gestures. My goal now is to adjust the brightness of this image based on the light estimated from the camera input. I have successfully implemented the light e ...

javascriptcssthree.jsaugmented-realityaframe

I ran into an issue trying to modify the color and thickness of the divider line in MaterialUI

Check out my code on codesandbox here. I'm trying to adjust the line thickness and color of the separator in my MaterialUI project, but I'm having trouble getting it to work. I've looked at a few examples, but nothing seems to be working for ...

javascriptcssreactjsmaterial-ui

Browsing across pages seamlessly without the need to refresh the browser

I need help with making my admin panel built using Bootstrap and integrated with Laravel navigate through tabs without refreshing the browser. Can anyone provide guidance on how to modify the code to achieve this functionality? You can check out the admin ...

javascripthtmlcsslaravelbootstrap-4

Issues with Jekyll incorrectly setting the CSS MIME type

My experience with Jekyll on Ubuntu Linux has revealed an issue where the correct mime type is not being added to a .css file in the _site/css/ directory. This problem came to light when uploading the site to an AWS S3 bucket, resulting in errors and rende ...

cssamazon-web-servicesjekyllmime