A div with an absolute position containing a header, content, and footer

How can I place a header, content, and footer inside a div element with absolute positioning, where the position value cannot be changed?

The header and footer have fixed heights, and the content should occupy the remaining space. The header should always stay at the top and the footer at the bottom.

The parent element should be resizable with a south resizable handle, and the content should adjust its height based on the parent element's height.

.content {
    height: ?; /* How should I determine this value? */
}

Here is an example of the scenario: http://jsfiddle.net/7gPzF/26/

htmlcsscss-position

Answer №1

DEMO

Here's a creative way to achieve this layout: by using absolute positioning for the middle content section and nesting the header and footer inside it. By adjusting padding, you can create space for the header and footer.

HTML

.wrap {
  width: 100px;
  border: 1px solid black;
  position: absolute;
}

.header {
  position: absolute;
  height: auto;
  width: 100%;
  top: 0;
  border: 1px solid green;
}

.footer {
  position: absolute;
  width: 100%;
  height: auto;
  border: 1px solid green;
  bottom: 0;
}

.content {
  height: 100%;
  /* Adjust this value accordingly */
  border: 1px solid green;
  position: relative;
  top: 0;
  padding: 20px 0;
  /* Maintain padding equal to header/footer height */
  box-sizing: border-box;
}
<div class="wrap" id="wrap">
  <div class="content">
    <div class="header">header</div>
    text text text text text text text text text text text text ....
    <div class="footer">footer</div>
  </div>
</div>

Answer №2

Utilizing jQuery allows you to accurately determine the available height for the .content section

var totalHeight = $("#header").outerHeight() + $("#footer").outerHeight();
    $("#content").css("height", "calc(100% - "+ totalHeight + "px" ).css("position", "absolute");

See it in action here: http://jsfiddle.net/z8Cwu/

Answer №3

I may not have fully grasped your meaning, But does this code align with what you're seeking?

Created the footer with:

position: absolute; bottom: 0px; right: 0px; left: 0px;

Adjusted the content to:

height: auto;

UPDATE: The solution above may not work if lots of text is added to the content, causing it to go beneath.

UPDATED LINK: http://jsfiddle.net/7gPzF/42/

I hope this information proves helpful.

Answer №4

If you're uncertain about the height of the header and footer, a JavaScript solution can be used.

Here's an example:

$('#main-content').height($('#main-container').height() - $('#footer').outerHeight() - $('#header').outerHeight());

Check out a working example here:

http://jsfiddle.net/7gPzF/41/

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

Issues arise when using the "placeholder" attribute within a <p:inputText tag while the inputText is devoid of any value

A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...

htmlcssjsfprimefaces

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

javascriptjqueryhtmlcssnavigation

Tips for extending the space between one element and another when the width decreases:

Currently in the process of building a website using HTML/CSS/JS and have run into an issue. My front page features an image with text overlay, where the image has 100% width and a fixed height of 487px. I positioned the text using position:relative; and t ...

javascripthtmlcss

The positioning of the Bootstrap dropdown menu is not aligned correctly

Issue with positioning Bootstrap dropdown I recently encountered a problem where I placed a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", but the dropdown menu still appeared in its original position. It seems l ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

javahtmlreactjsjsx

What are the drawbacks of utilizing CSS word-wrap across all elements on a website?

Is there a downside to utilizing the CSS property word-wrap:break-word in this manner? body { word-wrap: break-word; } The definitions for the values of this property are as follows: normal: Breaks words only at allowed breakpoints break-word: Perm ...

css

What is the best way to ensure that text stays aligned perfectly next to an

There seems to be a problem with my CSS. The text in the <li> tag is appearing below the line of the icon. How can I resolve this issue? I want the text to be vertically centered on the line. This seems to happen when I use the ::before selector with ...

htmlcss

How to use Javascript, HTML5, and AngularJS to display and print a PDF document within a

I have a situation where I need to load a Base64 encoded PDF as a String from my server into JavaScript in my client application which is built using AngularJS and HTML5. The structure of my HTML code is as follows: <div id="printablePdfContainer"> ...

javascripthtmlangularjspdf

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Is there a way to detect when the CSS property "display" of an image is changed by another JavaScript script or function and then execute some JS code? I tried using $(this).bind('propertychange', function(){}) but it doesn't work, and setIn ...

javascriptjquerycsscallback

Eliminate unnecessary spaces in the input field located below the provided text

In the html code, I have an input field that looks like this: https://i.sstatic.net/DsD4y.png This is the CSS for the input fields: .form-control-1 { display: block; margin: 0 auto; width: 30%; height: 50px; padding: 6px 12px; font-size: 18p ...

htmlcss

Menu Toggle with Bootstrap 3

I have implemented two Bootstrap 3 navigation menus on a single page. One menu works fine when the toggle button is activated for responsiveness, but the other one doesn't work as expected. How can I resolve this issue? Below are the code snippets fo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

javascriptpythonhtmlflaskstripe-payments

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

htmlangularangular-reactive-forms

Result of utilizing Bootstrap Radio buttons

Looking at the HTML snippet below, I am trying to display two lines of radio buttons. However, when I click on a radio button in the first line and then proceed to click any radio button in the second line, the result of the radio button in the first line ...

javascripthtmlformsdombootstrap-4

Different dimensions of the <select> element with the help of Ryan Fait's jQuery design script

New to java and struggling on my own, I am seeking advice on how to customize Ryan Fait's jQuery input styles to accommodate 2 unique types of elements. For the code reference, please visit: While the code is efficient, I am unsure how to create two ...

jquerycssselectinput

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Building a 3D Earth model using three.js for WebGL applications

I found a code online, but it doesn't seem to work. Can someone provide me with the HTML code needed to make it run in my browser? The original code was sourced from this website (github repository) Github code repository https://github.com/turban/ ...

javascripthtmlthree.js

Tweaking react-lottie and SVG dimensions with CSS media queries: A step-by-step guide

I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website. The components are stored in a .js file, which I import into m ...

cssreactjsreact-componentlottie

Having difficulty achieving the hover transition effect

I've been working on a navbar design and I'm having trouble getting the hover effect to work on the links. Specifically, I am trying to add a transform property to the after element of the links but it doesn't seem to be taking effect. #navb ...

htmlcsshover

The issue of CSS not being connected properly on Github

I have successfully connected my CSS folder, which includes the styles.css file, to my index.html using the following code: <link rel="stylesheet" href="css/styles.css"> Even though it works fine when I test it locally, the CSS d ...

cssgithub