"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Question

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs.

Have a look at the layout on my page: My Page

This is the code snippet I have worked on:

  return (
    <div>
     {/* First Block */}
        <div style={{ padding: "0.8%", backgroundColor:"red" }}>
            Block 1
        </div>
{/* Second Block */}
        <div style={{ height: "40%", overflowY: 'scroll', backgroundColor: "aqua", position: "fixed", width: "100%" }} >
       Block 2
        </div>

    {/* Third Block */}

      <div style={{ display: "flex", position: "fixed", bottom: 0, right: 0, left: 0, height: "40px", backgroundColor: "grey", }}>

           Block3
      </div>

    </div>
  );

Block 1 acts as the header block, while Block 2 serves as the content block and Block 3 functions as the footer block. I successfully managed to fix Block 1 at the top and Block 3 at the bottom. My current dilemma revolves around getting Block 2 to fit seamlessly in the middle with full-height responsiveness across various screen sizes. Although I tried setting manual heights for Block 2, adapting it to different screen sizes proved to be cumbersome. After seeking guidance from Stackoverflow without much success, I'm reaching out here for potential solutions.

The desired output appearance I am striving for can be viewed here: Output Screen

javascript html css reactjs

Answer 1

Answer №1

Check out this new layout suggestion. The header and footer are fixed, while only the center content is scrollable.

<div style={{ display:"flex", backgroundColor: "green", height: "100vh" , flexDirection:"column", flex:1}}>
      {/* First Block */}
      <div  style={{backgroundColor:"red",  width: "100%"}}>
        Block 1
      </div>
      {/* Second Block */}
      <div style= {{background: "pink",display:"block", overflow: "auto", flex:1}}>
        Block 2
        An essay is, generally, a piece of writing that gives the author's own argument, but the definition is vague, overlapping with those of a letter, a paper, an article, a pamphlet, and a short story. Essays have traditionally been sub-classified as formal and informal. Formal essays are characterized by "serious purpose, dignity, logical organization, length," whereas the informal essay is characterized by "the personal element (self-revelation, individual tastes and experiences, confidential manner), humor, graceful style, rambling structure, unconventionality or novelty of theme," etc.[...]
        
      </div>

      <div  style = {{marginTop:"auto", backgroundColor:"grey"}}>

        Block3
      </div>

    </div>

Answer 2

Check out this new layout suggestion. The header and footer are fixed, while only the center content is scrollable.

<div style={{ display:"flex", backgroundColor: "green", height: "100vh" , flexDirection:"column", flex:1}}>
      {/* First Block */}
      <div  style={{backgroundColor:"red",  width: "100%"}}>
        Block 1
      </div>
      {/* Second Block */}
      <div style= {{background: "pink",display:"block", overflow: "auto", flex:1}}>
        Block 2
        An essay is, generally, a piece of writing that gives the author's own argument, but the definition is vague, overlapping with those of a letter, a paper, an article, a pamphlet, and a short story. Essays have traditionally been sub-classified as formal and informal. Formal essays are characterized by "serious purpose, dignity, logical organization, length," whereas the informal essay is characterized by "the personal element (self-revelation, individual tastes and experiences, confidential manner), humor, graceful style, rambling structure, unconventionality or novelty of theme," etc.[...]
        
      </div>

      <div  style = {{marginTop:"auto", backgroundColor:"grey"}}>

        Block3
      </div>

    </div>

Answer 3

Answer №2

To establish a header footer body combination, follow these steps:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
margin:0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Design the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Establish two columns/boxes that float alongside each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* for display purposes only, consider removal */
  background: #ccc;
  padding: 20px;
}

/* Style the list within the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* for display purposes only, consider removal */
}

/* Clear floating elements after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Customize the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive design - stacks two columns/boxes on top of each other instead of next to each other on smaller screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

 
<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

Answer 4

To establish a header footer body combination, follow these steps:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
margin:0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Design the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Establish two columns/boxes that float alongside each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* for display purposes only, consider removal */
  background: #ccc;
  padding: 20px;
}

/* Style the list within the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* for display purposes only, consider removal */
}

/* Clear floating elements after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Customize the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive design - stacks two columns/boxes on top of each other instead of next to each other on smaller screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

 
<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Answer №1

Answer №2

Similar questions

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

Retrieve the Content-Type header response from the XHR request

JavaScript file encountering a Typescript issue with a property defined in a subclass

Effective Ways to Transfer Input Parameters to Karate File using npm

Browsing the web with Internet Explorer and uploading images

Achieving Vertical Alignment of ListItems in React Using Material UI

The useEffect function continues to fire twice even when the dependency array is empty

Rendering a ImageBitMap/Image on an OffScreenCanvas using a web-worker

Load Bootstrap CSS file externally on a website dynamically

Filtering elements upon loading

I need to optimize my function so that it is only invoked when a user clicks on a row in the datagrid, not for

Prevent the SVG mouseclick event with CSS styling

Certain scripts fail to load properly when using Internet Explorer

Is it possible for an Android webview to access the device's geo location?

The SyntaxError message indicates that there was an unexpected non-whitespace character found after the JSON data when parsing it

Is the output returning before the AJAX call is completed?

I am in the process of developing a React application, and when I try to run "npm start," I encounter this particular error

Generating dynamic variable names in JavaScript

Leveraging Material-UI's customized theme in tandem with Redux