HTML5: footer positioning (bottom + center) + div image Center

HTML5: footer positioning (bottom + center) + div image Center

I am a beginner in HTML + CSS layout and try to write a Baidu homepage by myself. However, I am troubled by footer's positioning and Baidu does not have a good solution. Here I will record the gradual process. Record, Memo.

If you are a beginner, the solution will inevitably be inappropriate. Please refer to the predecessors in this article for advice. Thank you first.

First, set

footer{    clear: both;    display: block;    position: absolute;    bottom: 100px;}

The effect is: it is definitely located at the bottom, but because it is absolutely located, use

footer{    clear: both;    display: block;    text-align: center;        margin: 0px auto;    position: absolute;    bottom: 100px;}

There is no center effect. Think about it as the footer width setting problem. After setting the width and width, the effect will be decisive. Considering the compatibility of the display of different sizes, you can call JS to dynamically set the width value. The Code is as follows:

 <Script> var w = window. innerWidth | document.doc umentElement. clientWidth | document. body. clientWidth; var h = window. innerHeight | document.doc umentElement. clientHeight | document. body. clientHeight; document. getElementById ("footer "). style. width = w + "px"; </script>

The center bottom is fixed and the following problems occur:

Question 1,

To narrow down the window in the horizontal direction, the above settings are equal to 0. After the window changes, it will not change with the window, that is, it is no longer the currently displayed valid window center, and a scroll bar appears;

Question 2,

Narrow down the vertical window. Similarly, the following situation occurs, that is, it overlaps with the middle part of the page!

How can we achieve horizontal center? It's actually very easy! Set to width: 100%;

footer{    clear: both;    display: block;    text-align: center;    margin: 0px auto;    position: absolute;    bottom: 100px;    width: 100%;}

By now, you can center the task horizontally, so you don't have to write a few scripts!

Question 3:

You can set the top value to solve the vertical migration problem. However, after top is set, bottom is useless. (logically, this is definitely a conflict. If top is set and bottom is set, who does the browser listen? Similarly, left and right have a paradox.) What should I do if I can try it?

The root cause of the problem is that footer changes with browser window changes when bottom is absolutely located and set. What we need to do is to break this pattern.

Solution 1: when the interface is scaled up or down, you can dynamically adjust the css style. Specifically, when a location is reached, you can use buttom to locate the location. When the location is exceeded, you can use top positioning, this ensures that the distance from the top to a specific value remains unchanged. When the distance exceeds the value, the distance from the bottom remains unchanged. The specific implementation code is as follows:

    
     
     Baidu, you will know<Script> function myFunc () {// obtain the window height if (window. innerHeight) winHeight = window. innerHeight; else if (document. body) & (document. body. clientHeight) winHeight = document. body. clientHeight; // detects the body in the Document to obtain the window size if (document.doc umentElement & document.doc umentElement. clientHeight & document.doc umentElement. clientWidth) {winheight1_document.doc umentElement. clientHeight;} if (parseInt (winHeight) <750) {document. getElementById ("footer "). setAttribute ("class", "dAdjustTop");/* document. getElementById ("inputtext "). value = winHeight + "" + document. getElementById ("footer "). getAttribute ("class"); */} else {document. getElementById ("footer "). setAttribute ("class", "dAdjustButtom");/* document. getElementById ("inputtext "). value = winHeight + "" + document. getElementById ("footer "). getAttribute ("class"); */} </script>    
 
  
News hao123 map video
                             
                                                                         
         
  
Set Baidu as the homepage for Baidu About Baidu
        
  
©2014 Baidu must read the Beijing ICP Certificate No. 030173 before using Baidu
Written by The_Third_Wave    
 

CSS is

Body {background-color: # FFFFFF; margin: 0px auto; padding: 0px;} nav {display: block; width: 400px; height: 100px; float: right ;} nav a {float: right; display: inline-block; padding: 15px; color: black; font-weight: bold ;}# mid {position: relative; top: 100px; width: 100%; min-width: 610px;/* Ensure that the image and input box are absolutely centered */height: 200px; text-align: center;/* only valid for input, invalid image */float: left; padding-bottom: 100px; /* Important! Space reserved for footer */} img {display: block; width: 270px; height: 129px; margin: 0px auto ;}# logo {margin-bottom: 20px; /* Ensure the spacing between the image and the input box */} # input {display: block; width: 100%; min-width: 610px; /* Ensure that the input of the subnode does not wrap */height: 40px; padding: 0px;} # inputtext {width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px # CECABC solid;/* the default border color is gray */} # button {display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px-6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid;} footer {/* border: 1px red solid; */clear: both; display: block; text-align: center; width: 100%; height: 120px; min-width: 610px;/* Ensure that the text is not wrapped in line-block */}. dAdjustButtom {position: absolute; bottom: 100px ;}. dAdjustTop {position: absolute; top: 530px;/* padding-bottom */} of the height-mid of tag-footer in * 750-120-100 JS */}

Code parsing: The onresize event is used to dynamically set CSS. I use class value changes to achieve this goal. For details, see the JS Code.

Solution 2: let him change with the content. When the content is not on the screen, we fix footer at the bottom and make sure that footer cannot see the content on the screen, that is, it appears only when the page is dragged to the bottom! That is, it is always fixed at the bottom of the page! How?

Here is a good article. Click here for reference: How to fix the footer at the bottom of the page

Question 4,

How to center the image in the div and directly add the Code:

# Mid {position: relative; top: 100px; width: 100%; min-width: 610px;/* Ensure that the image and input box are absolutely centered */height: 200px; text-align: center;/* only valid for input, invalid image */float: left;} img {display: block; width: 270px; height: 129px; margin: 0px auto ;} # logo {margin-bottom: 20px;/* Ensure the spacing between the image and the input box */} # input {display: block; width: 100%; min-width: 610px; /* Ensure that the input of the subnode does not wrap */height: 40px; padding: 0px;} # inputtext {width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px # CECABC solid;/* the default border color is gray */} # button {display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px-6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid ;}

Summary:

1. You can use width: 100% and text-align: center to center horizontally;

2. Vertical center and dynamic changes can be achieved using the onresize event + js Dynamic Setting layout (position: absolute; and top/bottom;

3. Align the image in the div: Use margin: 0px auto;

4. How can I ensure that the absolute center effect of the image and the input box remains unchanged during Left and Right stretching? Set the min-width value to the same! The same applies to other elements that use the display: inline-block function;

This article by @ The_Third_Wave (Blog address: http://blog.csdn.net/zhanh1218) original. Otherwise, it will be updated from time to time. please correct me if any error occurs.

If you find this Blog post incomplete, that is why I want to prevent crawlers from releasing them in half. Please refer to the original author's Blog.

If this blog post is helpful to you, you are not recommended to repost it for a good network environment. We recommend that you add it to your favorites! If you must reprint the content, please include the suffix and the address of this article.