HTML5 use CSS to achieve pure "bisecting scale" the entire vertical space

demand

The need to achieve head fixed in the "screen" above + central scroll + Fixed bottom under "Screen" page layout style.

Unfortunately, the above URL is given a fixed height solutions do not meet the requirements.

Claim

1. You must use pure CSS

If using JS dynamically calculated according to the layout, it is also possible.

By obtaining the height of the head and the bottom of the layout, and then you can get the screen height minus the height to the middle.

Height = height of middle fixing the screen - the head height - height of the bottom

2. You can not use Table Layout

Because UNI-APP project, we will not consider using other HTML elements to achieve specific layout

3. The height of the element can not write dead

Easy to fit different mobile phone screen height, if hard-coded height, poor compatibility.

solution

The final program: `display: flex`+ `position:fixed;`+`overflow: auto;`

code show as below

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;position:fixed; top:0;left: 0;right: 0;bottom: 0;">
  <div>我始终显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为1份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div style="flex: 5;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为5份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div >我始终显示在屏幕底部</div>
</body>
</html>

Perpendicular bisectors scheme: `display: flex`+`flex`

Central to this program content is low, the bottom of the display at the bottom of the screen content for a long time, the bottom of a document follow the scrolling display at the end of the document.

Among the content portion at least when the remaining space distribution thereof obtained, the head and bottom normally be expected to stay in position.

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是短短的内容；</li>
    </ol>
  </div>
  </div>
  <div >我现在显示在屏幕底部</div>
</body>
</html>

However, the content of which portion multi remaining thereon resulting spatial distribution, the height of the child element of the parent container will explode height, rather than the "fixed" for a start, "the resulting free space allocation"

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在文档的顶部,会随文档滚动</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；自身无法滚动；会随文档滚动</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  </div>
  <div >我现在显示在文档的底部,会随文档滚动；</div>
</body>
</html>

Reference material

css achieve bottom of the page is fixed at the bottom of the screen, after accounting for the content full screen closely followed by the two methods _JavaScript_ pigs fly -CSDN blog blog
1. / * Because it is so to mask the effect of fixed * /
2. position: fixed;
3. / * No this can not be rolled * /
4. overflow: auto;
Flex implemented using adaptive layout width · Issue # 14 · shaozj / blog

flex-shrink: 0; When expressed flex element beyond the container width is not compressed, so that the width of the element can be softened, so that the scroll bar appears.
flex layout, keeping content does not exceed the solution container _JavaScript_Alex_Zhao the blog -CSDN blog

If not set width, .content infinite distraction can child nodes;

That content is provided to flex as the remaining width to 1, it will dynamically from the parent container, and not the content of their sub-elements to distraction.
CSS - positioning properties position uses detailed (static, relative, fixed, absolute)

(. 1) Fixed generate an absolute positioning element, the element with respect to the positioning of the browser window.

Change (2) fixed positioned element does not scroll with the scroll bar of the browser window, the document will not be affected by the flow of influence, but is always located somewhere within the browser window view.
Solutions recorded a parent div class content can not quilt distraction, not the parent div height solution. _ Network _lihang199 the blog -CSDN blog

Where flex is not softened div layout may be initialized flex-shrink value of 1, i.e. insufficient space is automatically pressed, setting a value of 0, can be softened div
flex overflow _dearMengJJ child element of blog -CSDN blog

: The spring layout element is the expansion and contraction of its capacity.
flex: 1, min-width: 0 ensure that the contents do not exceed the parent box _JavaScript_LiuJingye123 blog -CSDN blog

If no min-width, when the content is greater than the width of the box would exceed the remaining parent box, is provided to ensure that the contents of min-width confined within the parent box
Front: page content is not enough, the footer is always fixed at the bottom of the front _JavaScript_ cabbage -CSDN blog
1. Absolute positioning
2. negative margin
The method of claim footer above two fixed height.