Adjusting the height of a div based on the height of the window

Here is the HTML structure I am working with:

<body>
    <div class="header">header</div>
    <div class="content">
        hello
    </div>
    <div class="footer">footer</div>
</body>

This is the current styling applied to the structure:

<style>
        body {
            padding: 0px !important;
            margin: 0px !important;
        }
        .header {
            height: 30px;
            background-color: gray;
        }
        .footer {
            height: 30px;
            background-color: green;
            position: fixed;
            bottom: 0px;
            width: 100%;
        }
        .content {
            background-color: yellow;
        }


    </style>

My goal is for the content div to fill the height of the window excluding the header and footer. Currently, the content div is just showing a small yellow strip due to minimal text inside it, with the rest of the page being white. I have tried using height: 100%; on the content div, but it did not work as expected. Any help on how to make the content div occupy the remaining space is appreciated.

Answer №1

Consider updating your content class with the following adjustments:

     .content{
            background: lightyellow;
            position: absolute;
            width: 100%;
            top: 20px;
            bottom: 20px;
        }

The top and bottom values are set to 20px to accommodate a 20px header and footer height. This should resolve the issue for you.

Answer №2

To enhance your design, create a div class="wrapper" to enclose your div class="content". Set the width and height of the .wrapper to 100% in the css. I believe this suggestion will be beneficial to you.

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

Using jQuery to create a nested table

I have a table that I would like to customize so that when a user clicks on a row, only the child table under that specific row is visible while the child tables under other rows are hidden. How can I achieve this using jQuery? <table class="mainTabl ...

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

HTML/JavaScript: Embrace the Power of Dynamic Page

I have a unique element in my HTML code: <image src="http://..." style='...'> Using Python-Flask, I pass on a dynamic source address and save it as window.dynamicEmbedding. Now, during page load, I want to change the image's ...

Pattern matching to locate text that is not enclosed within HTML tags and does not fall within certain specified tags

I am attempting to create a regular expression that will match specific words located outside and between HTML tags (but not within the tags themselves). However, I also need to ensure that these words are excluded when they appear between heading tags suc ...

Protect database entries from cross-site scripting attacks

I have a project in progress where I am developing an application that extracts text from tweets, saves it to the database, and then presents it on the browser. I am currently concerned about potential security risks if the text contains PHP or HTML tags. ...

Confirming an authorization?

I have been working on this code and it is almost perfect, but I am struggling to understand why it needs to validate the 0 or 10 in order to work correctly. The issue I am facing is with a validation where the button should be deactivated when the counte ...

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

Issue with vertical alignment within nested divs

I have been attempting to center a search bar inside a top banner vertically. My understanding was that the following code could achieve this: #banner { height: 35px; width: 100%; } #searchbar { height: 15px; position: relative; top: 50%; ...

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

Sending JavaScript functions to PHP files via Ajax

My Current Project: I am currently developing a script that provides users with choices and generates new options based on their selections. To achieve this, I have created two scripts - one for the HTML structure of my page and another for fetching serve ...

Guide on duplicating an HTML page with a button click

How can I duplicate HTML in a new tab when the following buttons are clicked: btn_change_folder_style_seg btn_change_folder_style_raw The content will be: <img src="./pic/web_show/3_seg/01.jpg" alt=""> <img src="./pic/web_show/3_seg/02.jpg" al ...

Implementing intricate inline styles in React for interactive features like hover and active states on components like buttons

I'm currently styling my buttons using the following CSS with Bootstrap. .btn-primary { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f9 ...

What is the best approach for looping through nested structures in Go?

When I attempt to iterate over a list of data enclosed in Curl brackets, I receive an error message stating "Range Can't iterate over....list of data." The struct I am working with is as follows: type FamilyMembers struct { XMLName xml.Name ...

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

Styles for Django Rest Framework admin interface are not displaying correctly

Has anyone else experienced an issue with the styling in their Django admin panel? The CSS appears to be functioning properly, but once you navigate to a specific model, the layout becomes distorted. I can't seem to figure out what could be causing th ...

Pattern to filter out numeric values from a collection

I want to apply a regex pattern to the <input> form element. The pattern should specify a range of numbers that are not permitted as input. For example, let's say I have a list of numbers like {1,4,10}, and any number other than these should b ...