为什么页脚显示在页面顶部？

时间：2020-06-08 03:32:48

标签： html css

我一直试图让页脚显示在页面底部，但由于某种原因，页脚一直浮动在页面顶部。对于我的一生，我无法弄清楚为什么。从理论上讲，由于页脚部分没有显示/放置道具，这是否不应该显示在页面底部？最终，我试图仅在页面末尾显示页脚，并在移动设备上水平查看时向下滚动页面。如果我现在在移动设备上水平查看它，则页脚将显示在页面顶部。

有什么提示吗？

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 个答案:

答案 0 :(得分：1)

您可以通过将height:100%内的包装div设置为fixed来固定

.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>

答案 1 :(得分：0)

  1. 添加新的类landing-page来容纳整个section内容的空间。
.landing-page {
  display: block;
  height: 100%;
  width: 100%;
}
  1. 在CSS类display: block;中添加.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>

答案 2 :(得分：0)

考虑到您的确切要求，以允许在移动设备的横向视图上滚动并在较大的设备上固定宽度（无滚动），我尝试使用CSS flexbox而不是position属性来实现此目的，因为它可以更好地控制布局。我正在用这个新的ans编辑我的旧ans。

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;
     }

 }

希望它对您有用。

答案 3 :(得分：0)

您的部分不在流程中。因为它的位置是固定的。 试试这个>> 

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>

相关问题
最新问题