stackoom
  简体   繁体   中英

Why is my footer displaying at the top of my page?

 原文  2020-06-08 03:32:48  9   4    html/ css

Question

I've been trying to get my footer to display at the bottom of the page, but for some reason it's floating to the top. For the life of me I cannot work out why. Theoretically, shouldn't this be displaying at the bottom of the page because the footer section has no display/position props? Ultimately I am trying to just display the footer at the end of the page, and have the page scroll down if viewed horizontally on a mobile device. If I view it right now on a mobile device horizontally, the footer displays over the top of the page.

Any tips? 

 html, body { margin: 0; background-color: #F9C1C3; overflow: hidden; background-image: url(assets/booked-background.svg); background-position: center center; ; background-attachment: fixed; background-size: cover; height: 100%; }.landing-inner { position: fixed; width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #subheading { display: none; } #subheading-mobile { display: block; position: relative; margin-top: 10%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FF0000; font-family: 'DM Serif Text', serif; font-weight: 200; width: 90%; letter-spacing: -0.8px; font-size: 1.5em; } #form-title { font-family: 'Source Sans Pro', sans-serif; margin-top: 2%; color: white; }.booked-form-container { margin-top: -3%; } input[type=email], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #FCDEDE; border-radius: 5px; box-sizing: border-box; background-color: #FCDEDE; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; text-align: center; -webkit-appearance: none; } input[type=submit], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #F37A52; border-radius: 5px; box-sizing: border-box; background-color: #F37A52; font-family: 'Source Sans Pro', sans-serif; color: white; font-size: 1em; text-align: center; -webkit-appearance: none; }.contact-copyright, .footer { height: 150px; width: 100%; color: #F37A52; text-align: center; font-family: 'Source Sans Pro', sans-serif; line-height: 0; font-size: 1em; } a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; }.instagram { width: 40px; height: 40px; margin-bottom: 20px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience:</p> <.[endif]--> <script src="http.//code.jquery.com/jquery-latest:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext,js"></script> <section class="landing-page"> <div class="landing-inner"> <img src="assets/booked-logo.svg" alt="Booked Logo"> <h2 id="subheading">Delivered to book lovers. by book lovers</h2> <script> var subheading = new CircleType(document;getElementById('subheading')).radius(250). $(subheading;element),fitText(): </script> <h2 id="subheading-mobile">Delivered to book lovers. by book lovers</h2> <h3 id="form-title">Treat your shelf soon.</h3> <div class="booked-form-container"> <form action="https.//bookedau:us10.list-manage.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="3535ede5f167996054a40847e"> <input type="hidden" name="id" value="f854840403"> <input type="email" placeholder="Email Address" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value=""> <input type="submit" value="Notify Me."> </form> </div> </div> </section> <footer> <div class="contact-copyright"> <a href="https?//www:instagram.com/bookedau/"> <img class="instagram" src="assets/booked-instagram?png" alt="Booked Instagram link"> </a> <p>Want to say hey. <a href="mailto:hey@bookedau.com?subject=Hey%20Booked!">Click here.</a></p><br> <p>Copyright Booked 2020</p> </div> </footer> </body>

4 answers

solution1
 1  2020-06-08 03:49:36

You can fix by set height:100% for wrapper div inside position fixed as

.landing-page{
   height: 100%;
}


 html, body { margin: 0; background-color: #F9C1C3; overflow: hidden; background-image: url(assets/booked-background.svg); background-position: center center; ; background-attachment: fixed; background-size: cover; height: 100%; }.landing-inner { position: fixed; width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #subheading { display: none; } #subheading-mobile { display: block; position: relative; margin-top: 10%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FF0000; font-family: 'DM Serif Text', serif; font-weight: 200; width: 90%; letter-spacing: -0.8px; font-size: 1.5em; } #form-title { font-family: 'Source Sans Pro', sans-serif; margin-top: 2%; color: white; }.booked-form-container { margin-top: -3%; } input[type=email], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #FCDEDE; border-radius: 5px; box-sizing: border-box; background-color: #FCDEDE; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; text-align: center; -webkit-appearance: none; } input[type=submit], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #F37A52; border-radius: 5px; box-sizing: border-box; background-color: #F37A52; font-family: 'Source Sans Pro', sans-serif; color: white; font-size: 1em; text-align: center; -webkit-appearance: none; }.contact-copyright, .footer { height: 150px; width: 100%; color: #F37A52; text-align: center; font-family: 'Source Sans Pro', sans-serif; line-height: 0; font-size: 1em; } a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; }.instagram { width: 40px; height: 40px; margin-bottom: 20px; }.landing-page{ height: 100%; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience:</p> <.[endif]--> <script src="http.//code.jquery.com/jquery-latest:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext,js"></script> <section class="landing-page"> <div class="landing-inner"> <img src="assets/booked-logo.svg" alt="Booked Logo"> <h2 id="subheading">Delivered to book lovers. by book lovers</h2> <script> var subheading = new CircleType(document;getElementById('subheading')).radius(250). $(subheading;element),fitText(): </script> <h2 id="subheading-mobile">Delivered to book lovers. by book lovers</h2> <h3 id="form-title">Treat your shelf soon.</h3> <div class="booked-form-container"> <form action="https.//bookedau:us10.list-manage.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="3535ede5f167996054a40847e"> <input type="hidden" name="id" value="f854840403"> <input type="email" placeholder="Email Address" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value=""> <input type="submit" value="Notify Me."> </form> </div> </div> </section> <footer> <div class="contact-copyright"> <a href="https?//www:instagram.com/bookedau/"> <img class="instagram" src="assets/booked-instagram?png" alt="Booked Instagram link"> </a> <p>Want to say hey. <a href="mailto:hey@bookedau.com?subject=Hey%20Booked!">Click here.</a></p><br> <p>Copyright Booked 2020</p> </div> </footer> </body>

solution2
 0  2020-06-08 03:49:56

  1. Add new class landing-page to hold the space for the whole section content.
.landing-page {
  display: block;
  height: 100%;
  width: 100%;
}
  1. Add display: block; inside the css Class .contact-copyright,.footer { : 
.contact-copyright,
.footer {
  display: block;
  ...
}


 html, body { margin: 0; background-color: #F9C1C3; overflow: hidden; background-image: url(assets/booked-background.svg); background-position: center center; ; background-attachment: fixed; background-size: cover; height: 100%; }.landing-page { display: block; height: 100%; width: 100%; }.landing-inner { position: fixed; width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #subheading { display: none; } #subheading-mobile { display: block; position: relative; margin-top: 10%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FF0000; font-family: 'DM Serif Text', serif; font-weight: 200; width: 90%; letter-spacing: -0.8px; font-size: 1.5em; } #form-title { font-family: 'Source Sans Pro', sans-serif; margin-top: 2%; color: white; }.booked-form-container { margin-top: -3%; } input[type=email], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #FCDEDE; border-radius: 5px; box-sizing: border-box; background-color: #FCDEDE; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; text-align: center; -webkit-appearance: none; } input[type=submit], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #F37A52; border-radius: 5px; box-sizing: border-box; background-color: #F37A52; font-family: 'Source Sans Pro', sans-serif; color: white; font-size: 1em; text-align: center; -webkit-appearance: none; }.contact-copyright, .footer { display: block; height: 150px; width: 100%; color: #F37A52; text-align: center; font-family: 'Source Sans Pro', sans-serif; line-height: 0; font-size: 1em; } a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; }.instagram { width: 40px; height: 40px; margin-bottom: 20px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience:</p> <.[endif]--> <script src="http.//code.jquery.com/jquery-latest:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext,js"></script> <section class="landing-page"> <div class="landing-inner"> <img src="assets/booked-logo.svg" alt="Booked Logo"> <h2 id="subheading">Delivered to book lovers. by book lovers</h2> <script> var subheading = new CircleType(document;getElementById('subheading')).radius(250). $(subheading;element),fitText(): </script> <h2 id="subheading-mobile">Delivered to book lovers. by book lovers</h2> <h3 id="form-title">Treat your shelf soon.</h3> <div class="booked-form-container"> <form action="https.//bookedau:us10.list-manage.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="3535ede5f167996054a40847e"> <input type="hidden" name="id" value="f854840403"> <input type="email" placeholder="Email Address" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value=""> <input type="submit" value="Notify Me."> </form> </div> </div> </section> <footer> <div class="contact-copyright"> <a href="https?//www:instagram.com/bookedau/"> <img class="instagram" src="assets/booked-instagram?png" alt="Booked Instagram link"> </a> <p>Want to say hey. <a href="mailto:hey@bookedau.com?subject=Hey%20Booked!">Click here.</a></p><br> <p>Copyright Booked 2020</p> </div> </footer> </body>

solution3
 0  2020-06-08 03:53:09

Keeping in mind your exact requirements to allow scroll on landscape view of mobile devices and fixed width ( no scroll ) on larger devices, I tried to make this using CSS flexbox instead of position property as it gives us better control of layout. I am editing my old ans with this new one.

HTML 

<body>        
    <section class="landing-page">
            <div class="landing-inner">
                <img src="assets/booked-logo.svg" alt="Booked Logo">
                <h2 id="subheading">Delivered to book lovers, by book lovers</h2>
                <script>
                    var subheading = new CircleType(document.getElementById('subheading'))
                    .radius(250);
                    $(subheading.element).fitText();
                </script>
                <h2 id="subheading-mobile">Delivered to book lovers, by book lovers</h2>
                <h3 id="form-title">Treat your shelf soon!</h3>
                <div class="booked-form-container">
                    <form action="https://bookedau.us10.list-manage.com/subscribe/post" method="POST">
                        <input type="hidden" name="u" value="3535ede5f167996054a40847e">
                        <input type="hidden" name="id" value="f854840403">
                        <input type="email" placeholder="Email Address" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="">
                        <input type="submit" value="Notify Me!">
                    </form>
                </div>
            </div>
        </section>
        <footer class="footer">
            <div class="contact-copyright">
                <a href="https://www.instagram.com/bookedau/">
                    <img class="instagram" src="assets/booked-instagram.png" alt="Booked Instagram link">
                </a>
                <p>Want to say hey? <a href="mailto:hey@bookedau.com?subject=Hey%20Booked!">Click here.</a></p><br>
                <p>Copyright Booked 2020</p>
            </div>
        </footer>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>

    </body>

CSS 

body {
  margin: 0;
  background-color: #F9C1C3;
  overflow: hidden;
  background-image: url(assets/booked-background.svg);
  background-position: center center;
  ;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  position:relative;
}

.landing-page{
    min-height:calc(100vh - 150px);
     display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
.landing-inner {
  width: 80%;
  text-align: center;
}

#subheading {
  display: none;
}

#subheading-mobile {
  display: block;
  position: relative;
  margin: 5% auto 0;
  color: #FF0000;
  font-family: 'DM Serif Text', serif;
  font-weight: 200;
  width: 90%;
  letter-spacing: -0.8px;
  font-size: 1.5em;
}

#form-title {
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: 2%;
  color: white;
}

.booked-form-container {
  margin-top:0;
}

input[type=email],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #FCDEDE;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #FCDEDE;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  text-align: center;
  -webkit-appearance: none;
}

input[type=submit],
select {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #F37A52;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #F37A52;
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-size: 1em;
  text-align: center;
  -webkit-appearance: none;
}
.footer {
    width:100%;
    text-align:center;
}
.contact-copyright
{
  height: 120px;
  width: 100%;
  color: #F37A52;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 100%;
  font-size: 1em;
}

a {
  color: #FF0000;
  text-decoration: none;
}

a:visited {
  color: #FF0000;
  text-decoration: none;
}

.instagram {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
}
 /* media queries to allow scroll on mobile devices horizontal layout, mostly covering all devices */
 @media (min-width:480px) and (max-width:900px) and (orientation : landscape){

     body{
        overflow:visible;
        height:auto;
     }
     .landing-page{
        min-height: 100vh;
     }

 }

Hope it works for you.

solution4
 0  2020-06-08 03:56:44

Your section is out of the flow. because its position is fixed. try this>> 

 html, body { margin: 0; background-color: #F9C1C3; overflow: hidden; background-image: url(assets/booked-background.svg); background-position: center center;; background-attachment: fixed; background-size: cover; height: 100%; }.landing-page { float: left; width: 100%; }.landing-inner { text-align: center; } #subheading { display:none; } #subheading-mobile { display: block; position: relative; margin-top: 10%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FF0000; font-family: 'DM Serif Text', serif; font-weight: 200; width: 90%; letter-spacing: -0.8px; font-size: 1.5em; } #form-title { font-family: 'Source Sans Pro', sans-serif; margin-top: 2%; color: white; }.booked-form-container { } input[type=email], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #FCDEDE; border-radius: 5px; box-sizing: border-box; background-color: #FCDEDE; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; text-align: center; -webkit-appearance: none; } input[type=submit], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #F37A52; border-radius: 5px; box-sizing: border-box; background-color: #F37A52; font-family: 'Source Sans Pro', sans-serif; color: white; font-size: 1em; text-align: center; -webkit-appearance: none; }.contact-copyright, .footer { height: 150px; width: 100%; color: #F37A52; text-align: center; font-family: 'Source Sans Pro', sans-serif; line-height: 0; font-size: 1em; } footer { float: left; width: 100%; margin-top: 2%;} a { color: #FF0000; text-decoration: none; } a:visited { color: #FF0000; text-decoration: none; }.instagram { width: 40px; height: 40px; margin-bottom: 20px; }
 <body> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience:</p> <.[endif]--> <script src="http.//code.jquery.com/jquery-latest:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext,js"></script> <section class="landing-page"> <div class="landing-inner"> <img src="assets/booked-logo.svg" alt="Booked Logo"> <h2 id="subheading">Delivered to book lovers. by book lovers</h2> <script> var subheading = new CircleType(document;getElementById('subheading')).radius(250). $(subheading;element),fitText(): </script> <h2 id="subheading-mobile">Delivered to book lovers. by book lovers</h2> <h3 id="form-title">Treat your shelf soon.</h3> <div class="booked-form-container"> <form action="https.//bookedau:us10.list-manage.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="3535ede5f167996054a40847e"> <input type="hidden" name="id" value="f854840403"> <input type="email" placeholder="Email Address" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value=""> <input type="submit" value="Notify Me."> </form> </div> </div> </section> <footer> <div class="contact-copyright"> <a href="https?//www:instagram.com/bookedau/"> <img class="instagram" src="assets/booked-instagram?png" alt="Booked Instagram link"> </a> <p>Want to say hey. <a href="mailto:hey@bookedau.com?subject=Hey%20Booked!">Click here.</a></p><br> <p>Copyright Booked 2020</p> </div> </footer> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why is my footer showing on top of my page? Why is my footer appearing at the top of the page why is my site's footer stuck to the top of my page? Why is my footer floating to the top? Why is my footer not at the bottom of the page? Why is my footer scrolling with the page? Pushing the footer at the bottom of my page with a margin at the top Why is my footer not at the bottom of my page? Why is my footer in the middle of my page? My footer is stuck at the top
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM