boostrap relative footer goes up when zoom out window

Question

i've got a site (asp.net and bootstrap) the problem is that i have a relative positioned footer that goes up when resize the window (or when see from mobile device) i can add margin to the content of the page to prevent this problem (but i will have much white space wich is very horrible)

here's my footer:

<div class="footer" id="footer" >   
<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Black;">
<div><h2>FEATURES</h2></div>
<div style="text-align:left;">
<ul>
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

</div>
<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Purple;"">
    <div><h2>SERVICES</h2></div>

<div style="text-align:left;">
<ul >
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

</div>

<div class="piede_circolare" style="display:inline-block; padding:5%; border-radius:50%; background-color:Black;"">
    <div><h2>ABOUT US</h2></div>

<div style="text-align:left;">
<ul >
<li>User Guides</li>
<li>FAQ</li>
<li>Shortcuts</li>
<li>Glossary</li>
<li>Forum</li>
</ul>
</div>

and the css:

.footer
{
    position:relative;
    color: white;
    background-color:#242424;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    margin-bottom:0;

bottom:0;
    border-top: 5px solid #242424;

    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
     transition: border-color 1s ease; 


}

.footer:hover
{
    border-color: #77008F;

    }

100% zoom:

50% zoom:

25% zoom (here's the problem-->see white space below the footer):

score 1 · Accepted Answer · answered Dec 21 '15 at 09:40

At the end i solved adding an element "spacer" and a js function: in the html:

<div class="row" id="spacer" style="height:10px;">


    </div>

the js:

function aggiustaPiede() 
        {


            var spacer = document.getElementById("spacer");
            var contenuto = document.getElementById("getAltezza");
            //alert(spacer.clientHeight);
            var diff = document.documentElement.clientHeight - contenuto.offsetHeight;
            var hhh = spacer.clientHeight;
            spacer.style.height = hhh + diff+ "px";

        }

it simply check if the document height is greater than the content of the page if yes it will increase the height of the spacer to the difference.

score 0 · Answer 2 · answered Dec 18 '15 at 20:35

There is white space under your footer since the body of your site is not enough to push the footer down at the bottom. You can set the min-height of your content and footer to be equal to 100%. However you should make sure to also set

html, body {
    height: 100%;
}

since these are the parent divs of your content

score 0 · Answer 3 · answered Feb 22 '22 at 14:23

0

From w3schools

<html>
<head>
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Your Footer</p>
</div>

</body>
</html>

answered Feb 22 '22 at 14:23

zartilas

25
7

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 22 '22 at 21:12

boostrap relative footer goes up when zoom out window

3 Answers3

Linked