How can I make a div as tall as the window?

I have a standard webpage layout with a fixed header and a sticky footer. However, I am struggling to figure out how to make the div heights extend to fill the entire window area.

HTML

<header>
    header header header
</header>

<div id="page">
    <div id="left">side bar side bar</div>
    <div id="right">
    <p>I want to draw a brown dashed line all the way down to the footer, even when the #right content is not enough to fill the window.</p>
    <p>I understand that I need to set height: 100% on #right so that it stretches to fill the green box. However, the green box itself does not stretch to the bottom because the yellow box does not have an explicitly defined height.</p>
    <p>What should I do in this situation?</p>
    </div>
</div>

<footer>
    footer footer footer
</footer>

CSS

html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
    position:relative; /* container for footer */
    border: 5px solid yellow;
    min-height: 100%; /* not specifying height to allow footer to be pushed downwards */
}
#page {
    padding: 60px 0 20px 0;
    border: 5px solid green;
    height: 100%; /* experiencing issues: how can I extend page to the bottom, ensuring at least the window size? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
    margin-left: 100px;
    padding-left: 10px;
    /* goal: create a vertical divider between #right and #left that reaches the footer */
    height: 100%;
    border-left: 5px dashed brown;
}

Answer №1

It seems that the reason why height 100% is not functioning is because the body element does not have a fixed height; instead, its height is dependent on the content within it.

However, there is a workaround for this issue.

To resolve this issue, you can add the following code to your CSS styles:

html, html body {
    height: 100%;
}
#page { /* If #page is a direct child of body, this should work */
    height: 100%;
}

You can view the JSFiddle example here.

Answer №2

To create a layout where the divs are always positioned 0px from the top and bottom of the window, you can utilize absolute positioning. It may require some tweaking of the values, but a setup similar to the following should do the trick:

#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }

Check out this example on jsfiddle to see how this concept can be implemented.

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

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

Having trouble loading the linked CSS file in the Jade template

My directory structure is organized as follows: --votingApp app.js node_modules public css mystyle.css views test.jade mixins.jade In the file mixins.jade, I have created some general purpose blocks like 'bo ...

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

Each function in Sass is compiled with a dollar sign preceding it

I'm having trouble using an each loop in Sass because the css is compiling with the variable names instead of their content. $green-1: #9ae200; $green-2: #5ea600; $color-list: green-1 green-2; @each $single-color in $color-list { &.#{$single ...

Learn the process of updating a specific section of a Facebook share link using AJAX dynamically

Here's an interesting scenario I'm dealing with. I'm trying to create a modification to the Facebook share button link where a portion of the link is replaced by a user ID number. This way, when someone clicks on the shared link, it will dir ...

Is there a way to prevent automatically scrolling to the top of the page when submitting a form?

Resolved! By enclosing the input tag within an anchor tag, the issue has been resolved. The question may appear confusing at first, so let me provide some clarification. I created a mail form using PHP. This form is located at the bottom of the page. Whe ...

Container displaying zero height due to masonry issue

Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, ...

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?

Do I need the attribute aria-labelledby on an <input> element nested within a <label> element that acts as a label for the <input>? For example: <label>This is an input field: <input type="text" /> </label> Or should ...

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

During the event handling process, a scenario arises where two div elements end up having identical IDs within the DOM structure. While using JQuery, my objective is to specifically target the second occurrence of the div with the aforementioned ID in the ...

What is the best way to place an element above another without disrupting the layout of the document?

I have a scenario where I am layering a black div on top of a red div using absolute positioning. Subsequently, additional content is displayed. p { position: relative; z-index; 10 } .wrapper { position: relative; } #red { height: 300px; w ...

Make the child element's height 100% when the parent's width is not set

Having trouble implementing the height:100; property on hover in my portfolio section. I've tried several solutions from similar questions without success. Although it works with media queries, I believe there's a better way to achieve this but I ...

React - The mechanics behind a spinning roulette wheel

I've been attempting to create a React roulette spinner but I've encountered some issues with the transitions and functionality. Here is the initial version of the algorithm: The callback functions are triggered whenever the 'winner&apo ...

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

Why are link elements that generate hyperlinks important?

I am confused about the purpose of using link tags to create hyperlinks. Is there a reason to include code like <link rel="author" href="about.html">, <link rel="next" href="next.html">, or <link rel="help" href="help.html">? Since this ...

PHP script causing email display issues in HTML format

After exploring various resources, I couldn't find a solution to my issue. My problem involves using PHP to send an HTML email; although the email is successfully sent out, it only displays the actual HTML code upon receipt. I've tried different ...

Positioning Input and Dropdown Elements within a Data Table Using CSS

I am currently working on setting up a data table for an application using Vue.js, and I am facing a challenge in relation to the arrangement of input elements. The specific requirement is that certain columns within the table should contain values that ar ...

Tips for forwarding an image uploaded using Flask Dropzone to a different page

I recently used Flask Dropzone to upload an image into the uploads folder. My goal is to pass this uploaded image to my makeMeme page so that I can display it using the html img tag. Despite my efforts, when I attempt to reference the file for displaying, ...

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...