One, adhesion layout

Features:

  • There is a piece of content


    , and when the height of

    is long enough, the element

    immediately following

    will scroll after the element

    .



  • When the


    element is short (less than the height of the screen, for example), we expect the

    element to “stick” to the bottom of the screen

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

  1. Box-sizing: border-box; The padding will be included when calculating the height.

    Set up thebox-sizing: border-box;Weird box model,height = contnet.height+padding+borderHeight +padding+border =667px= contnet. Height +padding+border

    Set up thebox-sizing: content-box;, standard box model,height = contnet.heightHeight = 100px; padding-bottom: 100px = 767; padding-bottom: 100px = 767

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