Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to fix the head and bottom of CSS with scrollbars in the middle". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Principle explanation

With flex layout, it is easy to realize the layout pattern of "fixed left and right sides, remaining 100%".

With the flex-direction: column; style, it is easy to achieve the "top and bottom fixed, middle 100%" situation.

Set the height of html,body to 100%; otherwise the height of div set to 100% is 0px

You must ensure that the height of the set control is inherited layer by layer from html > body > div >.... > div

Case (explanation of principle)

Title

/ * set the height of html and body to the height of the display screen * /

Html, body {

Height: 100%

Margin: 0

}

.wrap {

Display:-webkit-box

Display:-webkit-flex

Display:-ms-flexbox

Display: flex

-webkit-box-orient: vertical

-webkit-flex-direction: column

-ms-flex-direction: column

/ * the layout direction is vertical * /

Flex-direction: column

Width: 100%

Height: 100%

}

/ * set the height of the top and bottom * /

.header, .footer {

Height: 40px

Line-height: 40px

Background-color: # D8D8D8

Text-align: center

}

/ * set the height to be consistent with the height of the parent element, 100%

/ * the actual height is 100% minus the top height and bottom height, the left and right sides are fixed, and the remaining 100% is consistent in principle * /

.main {

-webkit-box-flex: 1

-webkit-flex: 1

-ms-flex: 1

Flex: 1

Width: 100%

Overflow: auto

}

Header

Elastic rolling area

Footer

Case 2 (glyph layout)

Utilization

Title

Html,body {

Height: 100%

Margin: 0

}

.wrap {

Display: flex

Flex-direction: column

Height: 100%

}

.header {

Height: 50px

Padding: 15px

}

.footer {

Height: 50px

}

.main {

Flex-grow: 1

Overflow: auto

Display: flex

Align-items: flex-start

}

.left {

Width: 300px

Background: yellowgreen

}

.right {

Width: 300px

Background: greenyellow

}

.center {

Flex-grow: 1

Background: aquamarine

Height: 100%

Overflow: auto

}

Header

Left

Center

Right

Footer

Set the height of html and body to 100%, then the height of body is the height of the monitor

Using flex layout, the head and bottom are fixed, and the middle is set to the remaining 100%.

The middle part, using flex layout, is fixed on the left and right sides, and the remaining 100% in the middle.

If you set the height of Center to 100%, it refers to the height of the parent element, excluding the height of the top and bottom, and the remaining 100% height.

Case (calculate the height of the intermediate component, the remaining 100%)

If you set the height of html and body to 100%, the height of body is the height of the monitor, and the height of child elements is that of reference body.

The head and bottom are fixed and the height in the middle is calculated.

Using flex layout, the left and right sides are fixed, with the remaining 100% in the middle.

The height is set to 100% of the parent element; if there is too much content in the middle, setting overflow:auto will cause a scroll bar

Title

Html,body {

Margin: 0

Height: 100%

}

. flex-study {

Line-height: 35px

Height: calc (100%-100px)

}

.flex {

Display: flex

}

.header {

Width: 100%

Background: # 42a5f6

}

.content {

Width: 100%

Background: bisque

Align-items: flex-start

Height: 100%

Overflow: hidden

}

.left {

Width: 300px

Background: yellowgreen

}

.right {

Width: 300px

Background: greenyellow

}

.center {

Flex-grow: 1

Background: aquamarine

Height: 100%

Overflow: auto

}

.footer {

Width: 100%

Background: blueviolet

}

Header

Left

Center

Right

Footer

This is the end of the content of "how to fix the head and bottom of CSS with a scroll bar in the middle". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.