Container with Two Columns Extending to Full Height of Body

I'm currently referencing this example for reference: . In this layout, the left column has a fixed width in pixels while the right column is resizable.

My goal is to set the height of the container to 100% of the body height.

For instance, focusing solely on the top layout example without considering the content at the bottom (copy code) on that page. How can I ensure that the height of the container is always 100% of the body height, regardless of whether there is content or not? When there is content, I want it to be scrollable; when there isn't any content, it should still occupy a minimum height of 100% of the body.

I've been exploring various options but haven't had any success yet. Any suggestions would be greatly appreciated.

You can find my jsfiddle example here:

http://jsfiddle.net/GtK98/1/

htmlcsscss-float

Answer №1

Have you given it a shot?

min-height:100%;

within your stylesheet?

Answer №2

This particular design layout does not currently include a footer. If you wish to have a footer added, kindly leave a comment below and I will make the necessary adjustments.

Created using Pure CSS, this layout allows for flexibility in adjusting the header height and left side width. It is also compatible across various browsers (including IE8+).

To see it in action, check out this Working Fiddle.

HTML: (simple structure)

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftContent">
            </div>
            <div class="RightContent">
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration purposes only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    float: left;

    /*for demonstration purposes only*/
    background-color: #90adc1;
}
.RightContent
{
    /*for demonstration purposes only*/
    background-color: #77578a;
}

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

Editing HTML on an ASPX website can be a breeze with

Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...

c#htmlasp.netcode-behind

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

As the div elements stack up and you scroll towards the top or bottom

I am dealing with two nested DIVs that are both scrollable. When I scroll the "inside div" (the green one in the attached file), and reach the bottom of the DIV, it starts scrolling the DIV beneath it. How can I prevent the DIV beneath from scrolling only ...

htmlcss

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

javascripthtmljquerycss

Creating a heading transition that moves from the bottom to the top with CSS

I am looking to add an animation effect to the H1 element in my program. I want it to smoothly appear from the bottom hidden position using a CSS transition when the page loads. How can I achieve this? Additionally, I need the height of the bounding elemen ...

javascripthtmlcss

Showing Information in an HTML Table

I am new to the world of PHP programming and constantly searching for solutions to my problems. If anyone has any ideas, please share them - I greatly appreciate any help in solving this issue. Within my database table, I have data structured as follows: ...

phphtmlmysql

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

htmlcssvue.jspagedjs

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

I am in the process of using dompdf for rendering a PDF file. Our application is built on Bootstrap 4 framework, and I want to incorporate it into the twig template used for generating our documents. However, I have encountered an issue with the Bootstrap ...

htmlcsspdfbootstrap-4dompdf

having difficulty showing the primary content page

I'm having trouble displaying a header, side navigation bar, and main content on my page with the code below. Instead of showing anything, I keep getting a parse error: unexpected end of file. What could be causing this issue? <!doctype html> ...

phphtml

Simple HTML alignment tool instead of Bootstrap

Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...

htmlcssasp.netfrontend

Looking to display the view source of an HTML page, but it keeps redirecting to another site when I try. Anyone know how to diagnose and fix this issue?

Can anyone assist me in displaying the HTML source of a page without it redirecting to another site? Here is the URL: ...

html

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration. This is ...

htmlcsstwitter-bootstrapgridview

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

javascripthtml

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...

htmlcss

Having difficulties redirecting with the button's onclick function

I'm struggling to redirect users to another page using a button (assuming the hostname is localhost:8000) $('#getFruit').attr('onclick', window.location.host + '/getFruit/banana') <script src="https://cdnjs.cloudfl ...

javascripthtml

Centering the header image on the screen creates a visually appealing focal point

Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly. ...

htmlcss

A guide to efficiently filling multiple rows of images with different heights while preserving their aspect ratio

I am facing a design challenge that I believe can be solved using CSS, although it might require some Javascript. My issue involves a gallery of images with varying sizes and proportions. I would like to achieve the following: Distribute the images in m ...

htmlcssflexboxgalleryimage-gallery

Is there a way to remove the excess white space beneath my content without resorting to using overflow-y: hidden?

I am struggling to eliminate the excess white space below the body of my web page in order to make it fit perfectly within the view of a web browser. Adding height helps with vertical alignment but leaves unwanted white space. I need a solution that doesn ...

htmlcss