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

Trouble arising when implementing media queries alongside jQuery

Struggling with a CSS problem that jQuery can't seem

Having trouble with the click button flip function? It seems to be working in one section but not in

Animation failing to be queued properly

Set the value of a static file uploader using jQuery

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

Using HTML to position multiple lines of text alongside an image

What is the best way to switch between different styles for each paragraph using CSS?

What are the steps to prevent a redirect?

The inputs are not responding to the margin-left: auto and margin-right: auto properties as expected

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

Access SCSS variable values in Angular HTML or TypeScript files

Place the HTML images in the center of the page

Struggling with applying mixins

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

Preventing box shadows from blending together

UTF-8 encoding experiencing issues on select Android mobile devices

Guide on how to dynamically add AJAX JSON array response to an HTML table