Reaching the highest achievable point for a stationary object positioned between two other stationary objects

Hey everyone, I'm facing an issue where I want my 

<div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div>

to fill the space between my 

<div id="header" style="position:fixed;top:0;width:100%;height:300px;"></div>

and 

<div id="footer" style="position:fixed;bottom:0;width:100%;height:200px;"></div>

The only css rule I have is 

html,body{position:fixed;height:100%;width:100%;}

I've already tried using height:100%; on my #content, but it's still displaying as height:auto;... Also, it needs to display correctly on mobile devices. So, my question is: what CSS rules should I modify or add to ensure that my #content takes up the entire space between the other two <div>'s?

http://jsfiddle.net/8AQQg/2/

htmlcssmobileheightfixed

Answer №1

Just a reminder that fixed or absolutely-positioned elements cannot flow around other elements. One workaround could be to create an absolutely-positioned div with dimensions matching the heights of your #header and #footer:

Check out this example on JSFiddle

html, body {
    position:fixed;
    height:100%;
    width:100%;
}
#header {
    position:fixed;
    top:0;
    width:100%;
    height:30px;
}
#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:20px;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 25px;
    width: 100%;
}

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

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

Creating dynamic toggle buttons in HTML using JavaScript and setting up their initial state

Currently, I have a div element: <div id="div1"> </div> I am attempting to create "toggle" buttons using JavaScript. These buttons can be created with the help of . <script> var count = 1; function foo() { var newBut ...

javascriptjqueryhtml

Sending multiple arguments from an HTML form to a PHP function

Hey, I'm facing a situation where I have an HTML form and I need to pass its value as a parameter to a PHP function. However, there's another value that I need to include which is not even present inside the HTML code. Take this for example: &l ...

phphtmlformsfunctionparameters

Guide to updating information inside of script tags in html using javascript

Within my HTML, there is a script tag that looks like this: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "VideoObject", "name": "Title", "description": "Video descrip ...

javascripthtmlangularjsmean-stackmean

Tips for ensuring that the lightbox scrolling feature only affects the lightbox and not the entire page

Currently, I am utilizing the lightbox_me jQuery plugin to trigger a lightbox when a user clicks on a product. The issue I am facing is that the lightbox content often extends below the visible area, causing the entire page to scroll when using the right s ...

javascriptjqueryhtmlcss

Exploring the animation potential of HTML5 canvas and Javascript through utilizing putImageData with animated gifs

I am interested in modifying the image data of each frame in an animated gif while it is playing in a web browser, using HTML5 canvas and Javascript. For instance, I would like to convert every frame to grayscale dynamically as the gif plays. Is this achie ...

javascripthtmlcanvasgifanimated

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

I'm trying to figure out how to simulate a Ctrl - zoom out using Javascript. I've noticed that using the style zoom property or the transform property gives different results with white space in the corners, rather than the smooth zoom out effect ...

javascriptjqueryhtmlcss

Can someone describe the cell phone symbol displayed in Google search results?

As I work on developing a mobile-friendly version of my website, I have noticed the presence of a mobile icon in Google search results. I am curious to learn more about what this mobile icon signifies and how I can effectively utilize it for optimizing m ...

htmlseo

Using Testcafe to extract the value attribute of a hidden input element

Is there a way to retrieve the value of an <input>, especially what is contained within its value attribute even if the input is not visible? I am using testcafé, but it seems like this could be a challenge. Does anyone have any suggestions or opti ...

javascripthtmlnode.jstestingtestcafe

What is the best way to access the inner value of an HTML tag?

There exists a variable named T T = < input type="text" name="amount" value="3" class="txt-spin" /> Inquire: What is the method to extract the value "3" from this tag using javascript..? ...

javascripthtml

html - displaying a new page within the content of the current page

I have a question about basic HTML knowledge that I find embarrassing Is it possible to open or load a second page within my first page? I want a menu button that will load the second page. <li class="current"><a href="first.html" target = "myC ...

htmlcss

Utilizing Selenium chromedriver to extract the latest dropdown table <tbody> information from a webpage and save it into a CSV file

Here is the table structure for a web URL: <body> <div class="marketData-inputSelect"> <select class="js-select js-optionsDataFilter"> <option value="total_volume">Total Options& ...

c#htmlseleniumselenium-webdriverfilestream

Where is this mysterious negative position originating from in Firebug?

I'm dealing with an element that has the following CSS attributes: .myElem { position: absolute; width: 100%; top: 25px; height: 6px; padding: 1px 0px; } Can someone please take a look at this screenshot I uploaded? When checking the layou ...

firefoxfirebugcss

Align all elements at the center in Bootstrap 4

My goal is to create a straightforward registration form with minimal elements, all centered on the page. However, I ran into an issue when using Bootstrap - all my elements are shrinking in size. For instance, an element that should be 100% width becomes ...

htmlcssbootstrap-4

Optimal method for relocating an element efficiently

I'm currently working on a project where I need to implement horizontal movement for a DOM element. The movement should start on mousedown, continue on mousemove, and end on mouseup. This task is especially challenging due to the site's numerous ...

javascriptperformancecsstransform

What methods can be used to ensure all widgets are aligned in a single line using html or css?

The code located at the end is functioning properly except for widget alignment, as shown in the image below. Do you have any suggestions on how to align all widgets together in a straight line (excluding the necessary wrapping which is currently working w ...

htmlcssrshiny

Ensure that the header stays centered on the page as you scroll horizontally

Below is a given code snippet: header { text-align: center; } /* This section is just for simulation purposes */ p.text { width: 20rem; height: 50rem; } <html> <body> <header> <h1>Page Title</h1> <detail ...

htmlcss

Retrieving numerous data points from the user interface

I am in the process of designing a user interface that includes various fields such as text boxes, dates, etc. It is important for users to be able to add values to these fields multiple times as needed. For example, a user fills out all the information ...

javascripthtmlreactjsuser-interface

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

I am facing an issue with a Bootstrap 3 web page. Some machines have IE configured to load intranet pages in Enterprise profile mode, while others have the default Desktop profile set in IE11. This configuration has caused the layout to break completely. ...

javascriptcsshtmltwitter-bootstrapinternet-explorer