The Sacred Chalice Trio Vertical Stretch Design

Recently, I've been working on creating a three column layout with percentage width. I stumbled upon the concept of the Holy Grail web design through some online articles and resources. To implement this layout, I referred to an example from The Perfect 3 Column Liquid Layout (Percentage widths). I made adjustments to set the left and right columns to 20% width each. However, one issue I encountered was that the layout did not cover 100% of the height as required. Despite trying to use min-height:100% or height:100%, I was unable to achieve the desired result. If you want to take a look at my implementation, check out my jsFiddle.

htmlcsslayout

Answer №1

Check out this unique demo

To ensure full height, simply apply a height of 100% to both the html and body elements:

html,body{
    height:100%;
}

In addition, make sure the inner three columns also have a height of 100%:

.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         
    position:relative;
    height:100%;
}

Answer №2

When the height is set to 100% of nothing, the result will always be nothing.

To ensure that child elements can inherit values correctly, it is important to fix the width and height of parent elements in CSS:

html, body, .colmask, .colmid, .colleft
{
    height:100%;
    margin:0;
}
.col1, .col2, .col3 {
    min-height:100%;
}

CSS stands for Cascaded Style Sheet :) DEMO : http://jsfiddle.net/tapas_23571113/BNjU5/1/

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

Extracting Data from JSON Using Vue.js

I am facing an issue with extracting data from a JSON file using Vue.js. Below is the HTML and JSON data along with the script. Any help would be appreciated. <!DOCTYPE html> <html> <head> <title>Vu ...

javascripthtmljsonvue.js

What are the steps for implementing CSS in Markdown?

How can I incorporate a CSS class into a Markdown file? For example, using <i class="icon-renren"></i> (from the fontawesome library) should display an icon when its CSS file is imported in HTML. Is there a way to achieve this in Markdown? ...

cssmarkdown

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

htmlcsshtml5-video

divs aligned at the same vertical position

Struggling for days to align buttons vertically, I have tried various approaches without success. I attempted using position: absolute; bottom: 0; on the parent with position: relative; set. @import url('https://fonts.googleapis.com/css?family=Mon ...

htmlcss

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Elements that are sortable will remain in place even after being removed from

In my project, I have created a list with sortable elements that can be deleted by dragging them into a trash bin. However, I am facing an issue where the element remains visible even after being removed. <div class="content-remove" id="content-rem ...

jqueryhtmljquery-uijquery-ui-sortablejquery-ui-droppable

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

javascriptjquerycss

Run a JavaScript code to show a hidden element

My latest project involves automating tasks on a website using Selenium. I encountered an issue where I cannot click on a hidden button defined this way: <body> <div class="smenu" id="smenu4"> <input tabIndex="-1" type="button" ...

c#htmlselenium

"My JavaScript code for toggling visibility is not functioning properly. Any suggestions on how to fix

I am currently working on a task that involves showing and hiding container1, but I am confused as to why my code is not functioning properly. The task requirements are as follows: - Clicking on the "Show" button should display container1 - Clicking on the ...

javascripthtml

The output from the Python and SQLite combination is accurate, however the HTML rendering is not displaying the data correctly

Retrieving data from a database using different methods can yield varied results. When the method is set to 'get', it returns all information, but when it's 'post', it only returns the searched item. Although the post method return ...

htmlsqliteflaskjinja2

Discover the best ways to repurpose an HTML page with varying jQuery/PHP code

After recently venturing into web development, I decided to create a guestbook that requires login information. Users with valid accounts have the ability to log in/out, create new entries, and edit their own content. They also have the option to change th ...

phpjqueryhtmlajaxcode-reuse

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is ...

jquerycssajax

Differences between using CSS properties and AngularJS filters:CSS properties

When working on an angularjs application, one task may be to convert a string to uppercase. There are 2 options available to achieve this, both yielding the same result. However, it is important to consider the scenarios in which one option may be preferre ...

cssangularjs

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

I currently have a frontend button implemented using nodejs and express for my server-side backend. The button is supposed to trigger a function that controls the Philips Hue API on the backend via an HTTP request. I have experimented with various approac ...

javascripthtmlnode.jshttpexpress

clicking a table row will activate the *ngFor directive

Incorporating data from an API into a table, I have enabled the functionality for users to click on table rows in order to change the displayed data using background code: <tr [ngClass]="tablerowClass" *ngFor="let dataObject of data$ | async" (click)=" ...

htmlangulartypescript

Using CSS to overlay a fixed element with a specific z-index

HTML: <div class="wrap"> <div class="fixed"></div> </div> <div class="cover"></div> CSS: .cover{z-index: 10;} .wrap{position: relative; z-index: 1;} .fixed{position: fixed; display: block; z-index: 1;} Example: ...

htmlcsscss-positionfixed

How to optimize PHP scripts by using a single MySQL query instead of loops?

Below are the tables I am working with... Locations __________________________________________________________ ID Location Region Country 1 Newmarket Ontario Canada 2 Barrie ...

phphtmlmysqlsql

What is the reason for the excessive width of the final column in this table?

I am currently working with a dataset that I am displaying using the handsontable library in the form of a table. One issue I am facing is that the last column of my table appears too wide even though I did not specify any width for it. Below you can see t ...

javascriptjqueryhtmlcsshandsontable

Modify the useRef value prior to the HTML rendering (React functional component)

Hello everyone, I am attempting to update the value of useRef before the HTML is rendered. I have tried using useEffect for this purpose, but it runs after the HTML is ready, making it unsuitable for my needs. What I want to achieve is resetting the value ...

javascripthtmlreactjsreact-hooks