Creating a div that spans the entire height from top to bottom

Question

Creating a div that spans the entire height from top to bottom

Currently, I am faced with the following scenario:

<div id=area>
 <div id=box>
 </div>
</div>
<div id=footer>
</div>

The "area" div is situated in the center and has a width of 700px with shadows on both the right and left sides. Inside this div, there is another div called box which spans 500px in width and contains text and various options. Additionally, at the bottom of the layout, there is a footer containing a single line of text.

Currently, the shadow effect on the "area" div ends where the box ends. However, on the next page where there is around 2000px worth of text within the same box, the "area" div's shadow displays correctly.

My desired outcome is to have the "area" div expand to fill the entire screen size, dynamically adjusting if more text is added inside it.

css html size

Answer 1

Answer №1

Consider implementing a solution similar to the following:

HTML

<!doctype html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <title>Example Title</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div id="content">
   <div id="container">
    Content goes here
   </div>
  </div>
  <footer id="footer">
   Footer content here
  </footer>
 </body>
</html>

CSS

html {height:100%} 
body {height:100%; margin: 0; padding: 0;} 
#content {height: 100%; background-color: #f1f1f1;}

Answer 2

Consider implementing a solution similar to the following:

HTML

<!doctype html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <title>Example Title</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div id="content">
   <div id="container">
    Content goes here
   </div>
  </div>
  <footer id="footer">
   Footer content here
  </footer>
 </body>
</html>

CSS

html {height:100%} 
body {height:100%; margin: 0; padding: 0;} 
#content {height: 100%; background-color: #f1f1f1;}

Creating a div that spans the entire height from top to bottom

Answer №1

Similar questions

My custom font is not compatible with the browser on my asp.net site

When attempting to click on the dropdown in Bootstrap, there is no content displayed

Tips for shutting down an open section within a jQuery Accordion?

Fully responsive header designed for optimal experience at any screen height

Using AJAX and PHP to dynamically fill HTML drop-down menus

Problem encountered with HTML table formatting

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Rotating an image as it approaches the footer: a step-by-step guide

Stacking background images in CSS above other contained elements in a div

"Unlocking the power of your device's microphone with

NavigateToTop/BackToTheBeginning

rely on a fresh event starting at one

Pick the final offspring of the HTML element that is not assigned to a specific class

Having trouble making my if / else statement show the_header_image_tag on WordPress

Animating pseudo-elements using Jquery

Tips for utilizing the Delete function in Python Flask

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

Loading Kendo JS on the client side proves to be rather time-consuming