Discussion of Html5:footer positioning (bottom + center) +div Picture centering problem

Beginner html+css Layout, try to write a Baidu home, but the location of footer encountered trouble and Baidu has no good solution, in this record the gradual process. Record, Memo.

Beginner, the solution will inevitably appear inappropriate, but also please see this article of the predecessors pointing twos, in this first thanked.

The first is set to

footer{Clear:both; Display:block;    Position:absolute;    bottom:100px;}

is absolutely positioned to the bottom, but because it is absolutely positioned, use

footer{Clear:both;    Display:block;        Text-align:center;    margin:0px Auto;    Position:absolute; bottom:100px;}

There is no center effect, think this should be footer width setting problem, set width after the decisive effective fruit, considering the compatibility of different size display, then you can call JS dynamic set the width value, the code is as follows:

<!--dynamically change the width of the footer to achieve a text center effect. -    <script>        var w=window.innerwidth | |        document.documentElement.clientWidth        | | Document.body.clientWidth;        var h=window.innerheight |        | document.documentElement.clientHeight        | | document.body.clientHeight;        document.getElementById ("Footer"). Style.width=w + "px";    </script>  

The center bottom is all fixed, the following problems occur:

Question 1、

Reduce the horizontal window, then the above setting is equal to 0, the window changes, will not change with the window, that is, the current display is no longer the center of the active window, there is a scroll bar;

Question 2、

Reduce the vertical window, similarly, the following situation, that is, and the middle part of the page overlap!

How is the horizontal center implemented? it's really simple! Set to width:100%;

footer{    Clear:both;    Display:block;    Text-align:center;    margin:0px Auto;    Position:absolute;    bottom:100px;    width:100%;}

To this level of the center, it will not be silly not to pull a few script!

New issuesQuestion 3：

The problem of vertically moving up can be resolved by setting the top value. But after setting the top bottom is useless (logically this affirmation conflict, set the top has been positioned, and set the bottom, then the browser to listen to who? The same as left and right there is also a paradox, specific can try, how to do?

The root of the problem is that when you use absolute positioning and setting up bottom, footer changes with the browser window , and all we have to do is break this pattern.

Solution 1, when the interface up and down, dynamically adjust the CSS style can: specifically, when reaching a position, using buttom positioning, when more than this position, the use of top positioning, so that you can reduce to a certain value distance from the top distance, zoom to more than this value , the distance from the bottom is unchanged. Specifically, the following code is implemented:

<! DOCTYPE html>CSS for 
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 picture and input box is absolutely centered */height:200px; Text-align:center;    /* Only valid for input, invalid picture */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 space between the picture and the input box */} #input {display:block;    width:100%; min-width:610px;    /* Ensure that the child node two input does not change the line */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;    /* 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 Inline-block effect is not wrapped */}.dadjustbuttom{position:absolute; bottom:100px;}.    dadjusttop{Position:absolute; top:530px; /* 750-120-100 js tag-footer height-mid padding-bottom*/}
Code parsing, using the OnResize event, dynamically set up CSS, I use the change of class value to achieve the purpose, specifically, see JS code.
Solution 2, we let him change with the content, when the content of the screen, we fixed footer at the bottom, in the screen can not fit the content, we want to ensure that the footer is not visible, that is, drag the page to the bottom of the show! That is always fixed at the bottom of the page ! What do you do?
Here is a good article, click Open Reference: How to fix the footer at the bottom of the page
Question 4、
How the picture is centered in the Div , directly on the code:
 <div id= " Mid "> <div id=" logo "> <!---->  </div> <div id=" Input "> <input id= "Inputtext" value= 111 "maxlength=" autocomplete= "Off" > <input id= "button" type= "Submit "Value=" Baidu "> </div> </div> 
#mid {    position:relative;    top:100px;    width:100%;    min-width:610px; /* Ensure that the picture and input box is 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 space between the picture and the input box */} #input {    display:block;    width:100%;    min-width:610px; /* Ensure that the child node two input does not change the line */    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; /* 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;}
Summarize:
1, the horizontal center can use width:100% and text-align:center;
2. Vertical centering and dynamic change you can use the OnResize event +js to dynamically set the layout (Position:absolute; and Top/bottom) to achieve;
3, the picture in the Div center set : Use margin:0px auto;
4, how to ensure that the left and right stretch picture and the absolute center of the input box effect is unchanged, set the minimum width min-width the same value! Other elements that use display:inline-block are the same;
This article by @the_third_wave (blog address: http://blog.csdn.net/zhanh1218) original . There are not covered, will be updated periodically, there are errors please correct me.
If you see this blog post is not complete, it is my first to prevent the crawler to release half of the reason, please see the original author blog.
If this blog post is helpful to you, for a good network environment, not recommended reprint, recommended collection!  If you must reprint, please bring the suffix and the address of this document. 
Discussion of Html5:footer positioning (bottom + center) +div Picture centering problem