All geek questions in one place

Footer compatibility versus IE and Google Chrome won't be a compromise

In my code, the footer will appear at the bottom of my page with no spaces above or below if I specify the height of my page in Google Chrome. I tried to do the height: 100%, etc., but still had problems.

When comparing this with my IE 11, the footer with the specified height takes place under it. I cannot make both browsers compromise, and I tried various options to make them both work.

My current css code that will affect the footer looks like this:

html {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        min-width: 768px;
        /*keeps footer at bottom of page for IE 11 */
        display: flex;

    }

    /* Formating for body of Web Site */
    * {margin: 0; padding: 0;}
    body {
     font-family: times new roman;
     background-color: #ebebeb;
     zoom: 75%;
     /*keeps footer at bottom of page for IE 11 */
     width: 100%;
     background-postion: 50% 80%;

     }

     #screen {
     /* This locks everything in place*/
     top:0px;
     margin: 0 auto; 
     width:1500px;
     height: 1500px;
         padding-top:0;
         padding-bottom: 30px;
         postion: absolute;
     margin-left: 70px;
     margin-bottom: 0;

     }

 /* footer formating  */
    #footer {

        background-color: black;
        height: 40px;
        width: 1500px;
        color: white;
        padding-top: 10px;
        position: relative center;
        bottom: 0;
        text-align: center;
        margin-left:70px;
    }

My html:

<html>
<div id = "screen">
 <body>


 ............................................. other code

<div id = "footer">
        Copyright Notice - Site Maintanence by **********
        <br>
        Author of Published Text Content: ************<br>

        <a href = "#">Pagetop</a>

</div> <!-- end footer -->

</div> <!-- end screen format -->

 </body>

</html>

What IE looks like:

enter image description here

+4
source share
1 answer

, , "" - Chrome IE11. , CSS, , , , , , CSS, .

HTML CSS, , , , .

<div id="screen"> <body>, .

HTML-, <div id="leftcol"> <div id="centercol"> "lorem ipsum", -. , <div id="screen"> -, .

<div id="screen">
    <div id="leftcol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
    <div id="centercol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>  
    <div class="clear"></div>
    <div id="footer">
        Copyright Notice - Site Maintanence by **********
        <br />
        Author of Published Text Content: ************
        <br />  
    </div> <!-- end footer -->
    <div class="center">
        <a href = "#">Pagetop</a>
    </div>    
</div> <!-- end screen format -->

CSS, , , , , - , , <HTML> display: flex; <div id="screen"> position: absolute;, , , :

*
{
    margin: 0;
    padding: 0;
}

html
{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body
{
    font-family: times new roman;
    background-color: #ebebeb;
    background-postion: 50% 80%;
}

#screen
{
    margin: 0 auto;
}

#footer
{
    padding: 5px;
    background-color: #000;
    color: #fff;
    text-align: center;
}

.center
{
    text-align: center;
}

#leftcol
{
    width: 30%;
    float: left;
    background: #B4B4B4;
}

#centercol
{
    width: 60%;
    float: right;    
    background: #fff;
}

#leftcol, #centercol
{
    padding: 2%;
}

.clear
{
    clear: both;   
}

, IE.

example: http://jsfiddle.net/Lvrcw4vw/3/

0
source

Source: https://habr.com/ru/post/1569926/

More articles:


All Articles