Increasing the height of a vertical division to reach its maximum vertical capacity

Looking for ways to make my html page more visually appealing. It is divided into 4 sections: Header, menu, content, and footer. The header is positioned at the top of the page, while the footer is located at the bottom. In between these sections are the menu on the left and the content on the right.

The height of the page is determined by either the menu or the content section, depending on which one is larger in size. I’m interested in adding a background to the menu block that extends all the way down to the footer, even if the actual menu items are shorter in length. Essentially, I want the menu block to be filled in based on the size of either the menu itself or the content, whichever happens to be bigger. Any suggestions?

https://i.sstatic.net/kXmRt.png
htmlcss

Answer №1

Example: http://jsfiddle.net/84jhzktu/

The desired layout can only be achieved using display table or JavaScript.

By using display: table-cell, div elements can mimic the behavior of table cells without the need for traditional table elements like tr, td, etc.

* {
    border: 1px solid;
}
header {
    padding: 20px;
    text-align: center;
}
.cont {
    width: 500px;
}
.wrap {
    display: table;
    width: 100%;
}
.wrap > * {
    display: table-cell;
}
.menu {
    width: 30%;
}
.wrap .stuff {
    height: 200px;
}

Answer №2

To create a structured layout for your menu and content areas, you can utilize the CSS property display: table-cell:

// Structure the menu and content sections using table-cell display

<div class="header">Header</div>
<div class="table">
    <div class="cell menu">Menu</div>
    <div class="cell content">Content</div>
</div>
<div class="footer">Footer</div>

.header, .footer { width: 100%; height: 50px; }
.table { display: table; width: 100%; }
.cell { display: table-cell; }
.menu { width: 50px; }
.content { }

Check out the JSFiddle Demo

Answer №3

Approach 1 :

Utilize the power of flexbox

Check out this demonstration to see how flexbox can help achieve your desired layout.

Approach 2 :

To make a container fill the entire height, you can:

html, body {
    height: 100%;
}

and then apply

div {
    height: 100%;
}

This approach allows the div element to take up the full height of the viewport.

Keep in mind that if the content is too lengthy, it may get truncated on smaller screens.

Take a look at this codepen for reference

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

Uncover the hidden message in a string encoded for JavaScript

This encoded HTML code is intended for use in a JavaScript function <div class=\"ProductDetail\"><div style=\"width:780px\">\r\n\t<div class=\"baslik\" style=\"margin: 0px; padding: 5px 10px ...

javascriptc#htmlencodingdecode

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

javascripthtmlreactjswebpackredux

What is the best way to convert my JSON data to HTML using JavaScript?

My dilemma seems to be rooted in the use of backticks. Strangely, an error keeps popping up whenever I try to employ them in my IDE (Brackets). I attempted solutions by testing directly in my Browser and through NotePad++, but unfortunately, nothing seeme ...

javascripthtmljson

Tips for effectively handling color inheritance within Bootstrap 5

I need to customize Bootstrap 5 .text-success color for better contrast on my custom .bg-lvlN classes. Here is how I have defined them: .bg-lvl1 { background-color: #303333; } .bg-lvl2 { background-color: #222424; } /* Overriding .text-success c ...

csssassbootstrap-5

Create a responsive iframe that expands to fullscreen when a button is clicked

Currently, I am using the following code to create an adaptive iframe with a fixed ratio for both width and height: <div id="game-container" style="overflow: hidden; position: relative; padding-top: 60%"> <iframe style="position: absolute; width ...

javascripthtmlcssiframe

Div sliding out of view

I'm encountering a slight issue with this template: essentially, my goal is to implement a feature where clicking on a box will expand it while simultaneously sliding the other boxes off-screen. However, instead of just sliding the div off-screen, it ...

javascriptjqueryhtmlcss

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

javascriptjqueryhtmljsonhtml-table

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

htmlcss

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

javascripthtmlinternet-explorermicrosoft-edge

Initiate CSS animation upon modification of component properties

I am looking for a way to create a fade in/out effect on a component whenever its prop changes. Unlike basic examples that toggle styles based on boolean conditions, I want the element's visibility state to be updated directly through prop changes. F ...

javascriptcssreactjs

Error Message: The function "menu" is not a valid function

I've encountered an issue with a function not being called properly. The error message states "TypeError: menu is not a function." I attempted to troubleshoot by moving the function before the HTML that calls it, but unfortunately, this did not resolv ...

javascripthtmlcssdropdown

Is JavaScript asynchronous when it comes to manipulating the DOM?

While conducting Javascript tests on the Android browser, I monitored the number of instruction counts executed on the CPU. The test code for JS is straightforward and embedded within HTML files located in the local directory of an Android device, not on a ...

javascripthtmlasynchronous

What steps should I take to customize prettier for Vue.js template syntax?

I need to modify a specific feature in Prettier. I'm curious if there's a simple method to incorporate the solution below without creating a custom parser. My .prettierrc.js: module.exports = { $schema: 'https://json.schemastore.org/pret ...

htmlvue.jsformattingprettier

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

jqueryhtmlcssdatatabledatatables

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

javascripthtmlhtml5-canvas

Display numerous divisions depending on the choices made in several Select2 fields

I need assistance in creating a website without using check-boxes, and I believe jQuery Select2 is the solution. However, I am facing an issue where I cannot display multiple divs based on multiple Select2 selections. For instance, if "OnBase" is selected ...

javascriptjqueryhtmljquery-select2jquery-select2-4

adjust the width of each individual cell in the table to create a varied layout

For my web app, I am working on a table that will contain multiple <tr> and <td> Here's the code snippet: <tr> <th style="width:30px;">date</th> </tr> <tr> <td>10-10-2016</td> </tr> E ...

jqueryhtmlcss

The magical unveiling of words through the art of animation

After spending considerable time learning how to code, I find myself seeking assistance in creating a specific animation. For the past two days, I've been struggling to bring my vision to life (see attached image). Unfortunately, my current knowledge ...

javascripthtmlcssanimation

What is the best way to organize a form's checkboxes into an array using Node.js?

My goal is to design a form with multiple checkboxes where each checkbox has the same name, and only the selected values are submitted with the form. While I know how to achieve this using PHP as demonstrated in this SO question, I am facing difficulty imp ...

htmlnode.jsexpress

Having trouble with your CSS on your mobile website?

After developing a website and implementing media queries for responsiveness, everything seemed to be in perfect working order. The website displayed flawlessly on emulators like () and Chrome's inspect element, mirroring my desired mobile design. How ...

htmlcssmedia-queries