One, adhesion layout
Features:
-
There is a piece of content
, and when the height of
is long enough, the element
-
When the
element is short (less than the height of the screen, for example), we expect the
As shown in figure: photo blog.csdn.net/VhWfR2u02Q/…
Two, simple implementation
The DOM structure:
<body>
<div class="wrap">
<div class="main">
<div class="content">content</div>
</div>
</div>
<div class="footer">footer</div>
</body>
Copy the code
Style:
<style> * { margin: 0; padding: 0; } html, body { height: 100%; }. Wrap {min-height: 100%; text-align: center; } .wrap .main{ padding-bottom: 100px; } .footer{ height: 100px; line-height: 100px; background: #3af; text-align: center; margin-top: -100px; } .content{ height: 200px; background: pink; } </style>Copy the code
-
The footer must be a standalone structure with no nested relationship to the wrap
-
The height of the wrap area is changed to the viewport height by setting min-height
-
The footer uses a margin of negative to determine its position
-
Padding-bottom needs to be set in the main area. This is also to prevent negative margins from causing the footer to overwrite any actual content.
Look at the results:
The footer is fixed at the bottom
When there is a lot of content, the footer scrolls behind:
3. Practice – Simplifying DOM structure
Above is the list of information, below is the confirm button. The previous button used absolute position, I need to change it to stick layout. When the list is short, the button is fixed at the bottom, and when the list is large, the button scrolls behind. DOM nodes look like this:
<div class="main"> <div class="list-info">info</div> <div class="list-info">info</div> <div class="list-info">info</div> <div class="list-info">info</div>Copy the code
Then I need to use sticky layout and wrap a layer outside main, which seems a bit redundant. I don’t want to nest this layer more than once, so I came up with a plan after some exploration.
The demo:
The DOM structure is as follows:
<div class="main">
<div class="content">content</div>
</div>
<div class="footer">footer</div>
Copy the code
The style is as follows:
<style> * { margin: 0; padding: 0; } html, body { height: 100%; }. Main {box-sizing: border-box; min-height: 100%; padding-bottom: 100px; } .footer{ height: 100px; line-height: 100px; background: #3af; text-align: center; margin-top: -100px; } .content{ text-align:center; height: 200px; background: pink; } </style>Copy the code
Pay attention to the point
-
Box-sizing: border-box; The padding will be included when calculating the height.
Set up the
box-sizing: border-box;
Weird box model,height = contnet.height+padding+border
Height +padding+border =667px= contnet. Height +padding+borderSet up the
box-sizing: content-box;
, standard box model,height = contnet.height
Height = 100px; padding-bottom: 100px = 767; padding-bottom: 100px = 767 -
If I set min-height on the body: 100%; , then I set min-height: 100%; Will not take effect
The reason: When the parent element sets min-height but does not set it, the child element’s height and min-height do not take effect. Whether the child element’s height or min-height takes effect depends on whether the parent element has a fixed height or a valid percentage height.
As the original article, image watermark for my blog, welcome to visit https://blog.csdn.net/qq_39903567/article/details/115556127 blog address