javascript - 如何将 div 放在页眉 div 下方和页脚 div 上方，全高 html

Question

我是新手reactjs。我有一个页面，其中3包含divs.

这是 我的页面

这是我尝试过的代码：

  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是一个标题块。Block 2是内容块。Block 3是页脚块。.我固定Block 1在顶部和Block 3底部。现在我希望我的 Block 2 能以全高安装在中间。我可以手动为 Block 2 提供高度。但是那里有很多屏幕尺寸。对我来说，这变成了一个混乱的过程。我想让 Block 2 适合所有屏幕尺寸。我怎样才能做到这一点。我搜索了 Stackoverflow，但我无法修复它。请帮我解决一些问题。

我需要的输出： 输出屏幕

标签： javascripthtmlcssreactjs

Answer 1

尝试这个。页眉和页脚将被修复。只有中心内容可以滚动

 <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>