如何将 div 置于页眉 div 下方和页脚 div 上方，全高 html

Question

I am new to reactjs .我是reactjs 。 I have a page which has 3 block of divs .我有一个页面，其中有3个divs块。

Here's the Code I tried:这是我试过的代码：

  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 is a the Header Block. Block 1是标题块。 Block 2 is the Content Block. Block 2是内容块。 Block 3 is the Footer Block. Block 3是页脚块。 .I fixed Block 1 on Top and Block 3 on bottom. .我将Block 1 Block 3固定在顶部，将Block 3 Block 1固定在底部。 Now I want my Block 2 to fit in the middle with full height.现在我想让我的 Block 2 全高地放在中间。 I can give height as manual to Block 2. But there are lot of screen sizes out there.我可以为 Block 2 提供高度作为手册。但是那里有很多屏幕尺寸。 It becames a messy process for me.这对我来说变成了一个混乱的过程。 I want to make Block 2 to fit it in it for all screen sizes.我想让 Block 2 适合所有屏幕尺寸。 How can I achieve this.I searched Stackoverflow but I can't able to fix it.我怎样才能做到这一点。我搜索了 Stackoverflow，但我无法修复它。 Please help me with some solutions.请帮我解决一些问题。

Output I need: Output Screen我需要的输出：输出屏幕

Answer 1

If you want to create a header footer body then如果要创建页眉页脚正文，则

 <!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; } /* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section::after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small 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 2

Try this.尝试这个。 Header and Footer will be fixed.页眉和页脚将被修复。 Only Center Content will be 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.[1]

Essays are commonly used as literary criticism, political manifestos, learned arguments, observations of daily life, recollections, and reflections of the author. Almost all modern essays are written in prose, but works in verse have been dubbed essays (e.g., Alexander Pope's An Essay on Criticism and An Essay on Man). While brevity usually defines an essay, voluminous works like John Locke's An Essay Concerning Human Understanding and Thomas Malthus's An Essay on the Principle of Population are counterexamples.

In some countries (e.g., the United States and Canada), essays have become a major part of formal education. Secondary students are taught structured essay formats to improve their writing skills; admission essays are often used by universities in selecting applicants, and in the humanities and social sciences essays are often used as a way of assessing the performance of students during final exams.

The concept of an "essay" has been extended to other media beyond writing. A film essay is a movie that often incorporates documentary filmmaking styles and focuses more on the evolution of a theme or idea. A photographic essay covers a topic with a linked series of photographs that may have accompanying text or captions
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.[1]

Essays are commonly used as literary criticism, political manifestos, learned arguments, observations of daily life, recollections, and reflections of the author. Almost all modern essays are written in prose, but works in verse have been dubbed essays (e.g., Alexander Pope's An Essay on Criticism and An Essay on Man). While brevity usually defines an essay, voluminous works like John Locke's An Essay Concerning Human Understanding and Thomas Malthus's An Essay on the Principle of Population are counterexamples.

In some countries (e.g., the United States and Canada), essays have become a major part of formal education. Secondary students are taught structured essay formats to improve their writing skills; admission essays are often used by universities in selecting applicants, and in the humanities and social sciences essays are often used as a way of assessing the performance of students during final exams.

The concept of an "essay" has been extended to other media beyond writing. A film essay is a movie that often incorporates documentary filmmaking styles and focuses more on the evolution of a theme or idea. A photographic essay covers a topic with a linked series of photographs that may have accompanying text or captions
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.[1]


      </div>
      {/* Third Block */}

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

        Block3
      </div>

    </div>

如何将 div 置于页眉 div 下方和页脚 div 上方，全高 html

问题描述

2 个解决方案

解决方案1
0 2021-11-15 12:25:50

解决方案2
0 2021-11-15 12:42:03

如何将 div 置于页眉 div 下方和页脚 div 上方，全高 html

问题描述

2 个解决方案

解决方案1 0 2021-11-15 12:25:50

解决方案2 0 2021-11-15 12:42:03

解决方案1
0 2021-11-15 12:25:50

解决方案2
0 2021-11-15 12:42:03