What is the best way to ensure a DIV fills the entire page without using "position: absolute;"?

I am currently working on designing a webpage layout with multiple headers, main content, and a footer.

My goal is to use the jQuery UI tabs widget in the main content area with a border around it. The div should span the entire space between the headers and footer, while also expanding vertically if necessary, causing a scrollbar to appear for scrolling.

The minimum height of the content div should be the distance between the header and footer, but it should have the ability to expand beyond that initial size.

I have attempted to implement the Sticky Footer method, which works well except that I want a border around my main content. In the provided jsFiddle example, the div with the red 2px border should initially fill the page and expand when additional content is added so that the footer is pushed down accordingly and a scrollbar appears.

This is my desired outcome:

  • The content must have a border.
  • The initial content should fill the space between the header and footer.
  • The content should expand past the bottom of the screen, triggering a scrollbar.
  • The footer should adjust as the content grows.
  • Strictly CSS is preferred so that any changes in content are automatically adjusted.
  • Solution should work in modern browsers only, without support for IE<8.

I have explored options such as absolute positioning, jQuery positioning, setting heights using CSS properties, and reviewing similar Stack Overflow questions, but none fully address the issue of content growing beyond the bottom of the screen efficiently.

csslayouthtml

Answer №1

Check out my solution at http://jsfiddle.net/Dkjyp/8/

Due to the variable height of the window, I utilized percentages exclusively, combined with absolute positioning.

.bar { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

To address the issue of long content, I implemented a container for the main section that displays a scrollbar when necessary. Unfortunately, using percentage-based heights prevents me from adding borders as it requires pixel values, which interferes with the layout.

Answer №2

One way to ensure your content container is the right height is to measure the distance between the header and footer elements and set the minimum height of the container to that value in pixels.

For example, if the distance is 600px, you can set:

min-height:600px;
height:100%

By setting the min-height, the container will always be at least 600px tall. If the content exceeds this height, the container will elongate to fit the additional content using the height:100% property.

To easily measure distances onscreen, you can use tools like the "Measure It" browser extension for Chrome or Firefox.

I hope this explanation helps! You can also check out a working example on jsfiddle http://jsfiddle.net/Atjxc/11/

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

Detecting iOS format in HTML email communications allows for a more seamless

Recently, I discovered a meta tag that removes the phone number as a link in HTML on iOS. I'm curious if this also works with HTML emails. <meta name="format-detection" content="telephone=no"> I've been using workarounds to handle address ...

htmlhtml-email

Exploring the world of web scraping using Scrapy, Python, and a JavaScript-based website all in one

Hello, I am attempting to scrape the website using the following script: script.py import scrapy from scrapy.crawler import CrawlerProcess from threading import Thread class CourtSpider(scrapy.Spider): name = 'full_page' allowed_domai ...

pythonhtmlweb-scrapingscrapy

Struggling to connect with PouchDB within my HTML-based Web application

I am looking to integrate pouchDB into my WebApp so that upon clicking a button, the data from a JSON file will be saved to pouchDB. In the initial stage in my index.html, I included the following: <script type="module" src="pouchdb/packa ...

javascripthtmlnode.jscouchdbpouchdb

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Adjust css rotation to direct an element towards a specific point

Looking to rotate a div towards a point using the CSS 3 transform rotate function. Progress so far: View code on JSFiddle $(document).ready(function(){ var scw,sch,scx,scy; calcCenter(); $(window).resize(function() { calcCent ...

jquerycsscss-transforms

A complete guide on utilizing *ngFor in Angular to display data rows

I am facing an issue with using *ngFor to create new "rows" for adding new categories dynamically. Although there are no errors displayed when I run the program, the intended functionality is not achieved. I have tried making some modifications but it see ...

htmlcssangular

Pictures Unavailable to Show in Table

I've been working on a project where I need to insert some images into a table. Usually, this isn't an issue for me. However, today when I added the images to the table, all I see is a square border with the alt text inside it. I'm confident ...

htmlcss

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

javascriptphphtmlforms

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...

javascripthtmlurlhref

Pass information to a PHP file using JavaScript when the form is submitted

Essentially, I am looking to extract values from various inputs and spans using JavaScript when the submit input is clicked. These values will then be sent to PHP using $post in order to ultimately send them via email. Previously, I tested replacing all of ...

javascriptphphtmlpostform-submit

Adding list items to an unordered list without making them draggable using jQuery

How can I allow users to build a list of sports and drag them into a "cart" using jQuery? The issue I'm facing is that the appended list items are not draggable, and I'm unsure of how to solve this problem. /* JS code for sports.html */ $(fu ...

javascriptjqueryhtmljquery-ui-draggable

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

htmlangularjsarrays

The dropdown in MaterializeCSS does not display any data retrieved from VUE

Good evening. I am currently utilizing VUE along with MaterializeCSS. I have been trying to populate a selection menu without success. Although I am receiving the data from the database correctly, the options in the select tag remain blank when using V-F ...

cssvue.jsdrop-down-menumaterialize

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

htmlcsshtml-tablescrollable

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

inputting an array of strings into the value attribute of an input element using jQuery

Whenever a user writes something in the input field with id="clientAdd" and presses enter, that text should be displayed as a tag inside a div. These tags are then saved as an array of strings, which I want to pass as the value for the hidden input field w ...

javascriptjqueryhtml

Verify if the specified value is present in the dropdown using AngularJS

Utilizing AngularJS, I have implemented an input field with autocomplete functionality. The autocomplete feature pulls data from a JSON file and displays it in a dropdown table format. Users are able to filter the results and select a value from the dropdo ...

javascripthtmlangularjsvalidation

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

SASS: Issues with the @media query functionality

My SASS file is giving me trouble with the media query. The background color changes properly, but the text remains unaffected. I would greatly appreciate your assistance with this issue. Below is the HTML and SASS code snippets in question: <!-- HTM ...

csssass

What is the best way to attach a value to an attribute of a web component in Angular?

In all honesty, I am quite new to Angular and still learning the ropes. Currently, I am faced with a debugging challenge related to one of the users encountering an issue with my web component library. Within this library, there is a custom element create ...

htmlangularlit-element