如何在调整大小时修复页脚重叠内容

I have a problem with a template. On a large screen, it's look fine, like this:

我的模板有问题。在大屏幕上,它看起来很好,像这样:

But when I resize my browser, the content won't push the footer down. Here is a picture:

但是,当我调整浏览器大小时,内容不会向下推动页脚。这是一张图片:

Here is my code, which is too long so forgive me. index.php

这是我的代码,太长了,请原谅我。的index.php

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <!-- simple code -->
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- simple code -->
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- Begin page content -->
<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
                <div class="intro-text">
                    <!-- simple intro -->
                </div>
            </div>
        </div>
    </div>
</header>

<footer class="text-center">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <div class="footer-col col-md-4">
                    <h3>Location</h3>
                    <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
                </div>
                <div class="footer-col col-md-4">
                    <h3>Around the Web</h3>
                    <ul class="list-inline">
                        <!-- some social networks -->
                    </ul>
                </div>
                <div class="footer-col col-md-4">
                    <h3>About Freelancer</h3>
                    <p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    Copyright &copy; Author <?php echo date("Y"); ?>
                </div>
            </div>
        </div>
    </div>
</footer>

Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).

这是我的Css,也太长了,请原谅我(我删除了一些不相关的代码)。

            /* Sticky footer styles
        -------------------------------------------------- */
        html {
          position: relative;
          min-height: 100%;
        }
        body {
          /* Margin bottom by footer height */
          margin-bottom: 60px;
        }
        footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          /* Set the fixed height of the footer here */
          height: 340px;
          background-color: #f5f5f5;
        }


        /* Custom page CSS
        -------------------------------------------------- */
        /* Not required for template or sticky footer method. */

        body > .container {
          padding: 60px 15px 0;
        }
        .container .text-muted {
          margin: 20px 0;
        }

        footer > .container {
          padding-right: 15px;
          padding-left: 15px;
        }

        code {
          font-size: 80%;
        }

        /*!
         * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
         * Code licensed under the Apache License v2.0.
         * For details, see http://www.apache.org/licenses/LICENSE-2.0.
         */

        body {
            overflow-x: hidden;
        }

        header {
            text-align: center;
            color: #fff;
            background: #18bc9c;
        }

        header .container {
            padding-top: 100px;
            padding-bottom: 50px;
        }

        @media(min-width:768px) {
            header .container {
                padding-top: 200px;
                padding-bottom: 69px;
            }

            header .intro-text .name {
                font-size: 4.75em;
            }

            header .intro-text .skills {
                font-size: 1.75em;
            }
        }

        @media(min-width:768px) {
            .navbar-fixed-top {
                padding: 25px 0;
                -webkit-transition: padding .3s;
                -moz-transition: padding .3s;
                transition: padding .3s;
            }

            .navbar-fixed-top .navbar-brand {
                font-size: 2em;
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
            }

            .navbar-fixed-top.navbar-shrink {
                padding: 10px 0;
            }

            .navbar-fixed-top.navbar-shrink .navbar-brand {
                font-size: 1.5em;
            }
        }

        .navbar {
            text-transform: uppercase;
            font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 700;
        }

        .navbar a:focus {
            outline: 0;
        }

        .navbar .navbar-nav {
            letter-spacing: 1px;
        }

        .navbar .navbar-nav li a:focus {
            outline: 0;
        }

        .navbar-default,
        .navbar-inverse {
            border: 0;
            background-color:#233140;
        }

        footer {
            color: #fff;
        }

        footer h3 {
            margin-bottom: 30px;
        }

        footer .footer-above {
            padding-top: 50px;
            background-color: #2c3e50;
        }

        footer .footer-col {
            margin-bottom: 50px;
        }

        footer .footer-below {
            padding: 25px 0;
            background-color: #233140;
        }

How can I solve this, so the page content will push the footer down...at any size of browser. Any help is appreciated.

我该如何解决这个问题,因此页面内容会在任何大小的浏览器中向下推...任何帮助表示赞赏。

3 个解决方案

#1

Removing position:absolute; from the footer in the css appears to work. Perhaps consider having it set to absolute at wider screen sizes using media queries if having position:absolute is absolutely (pardon the pun) necessary.

删除位置:绝对;从css的页脚似乎工作。也许考虑使用媒体查询将其设置为绝对更宽的屏幕尺寸,如果位置:绝对是绝对的(请原谅双关语)必要的。

I provided a snippet with the absolute positioning removed, as well as the potential addition to a media query, which is commented out, but there to demonstrate.

我提供了一个删除绝对定位的片段,以及媒体查询的潜​​在补充,这已被注释掉,但有证据。

/* Sticky footer styles
        -------------------------------------------------- */
            html {
              position: relative;
              min-height: 100%;
            }
            body {
              /* Margin bottom by footer height */
              margin-bottom: 60px;
            }
            footer {
              width: 100%;
              /* Set the fixed height of the footer here */
              height: 340px;
              background-color: #f5f5f5;
            }
            /* Custom page CSS
        -------------------------------------------------- */
            /* Not required for template or sticky footer method. */
            body > .container {
              padding: 60px 15px 0;
            }
            .container .text-muted {
              margin: 20px 0;
            }
            footer > .container {
              padding-right: 15px;
              padding-left: 15px;
            }
            code {
              font-size: 80%;
            }
            /*!
         * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
         * Code licensed under the Apache License v2.0.
         * For details, see http://www.apache.org/licenses/LICENSE-2.0.
         */
            body {
              overflow-x: hidden;
            }
            header {
              text-align: center;
              color: #fff;
              background: #18bc9c;
            }
            header .container {
              padding-top: 100px;
              padding-bottom: 50px;
            }
            @media(min-width:768px) {
              header .container {
                padding-top: 200px;
                padding-bottom: 69px;
              }
              header .intro-text .name {
                font-size: 4.75em;
              }
              header .intro-text .skills {
                font-size: 1.75em;
              }
              /*
                ****Optional****
                footer{
                position:absolute;
                bottom:0px;
                }*/
            }
            @media(min-width:768px) {
              .navbar-fixed-top {
                padding: 25px 0;
                -webkit-transition: padding .3s;
                -moz-transition: padding .3s;
                transition: padding .3s;
              }
              .navbar-fixed-top .navbar-brand {
                font-size: 2em;
                -webkit-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
              }
              .navbar-fixed-top.navbar-shrink {
                padding: 10px 0;
              }
              .navbar-fixed-top.navbar-shrink .navbar-brand {
                font-size: 1.5em;
              }
            }
            .navbar {
              text-transform: uppercase;
              font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-weight: 700;
            }
            .navbar a:focus {
              outline: 0;
            }
            .navbar .navbar-nav {
              letter-spacing: 1px;
            }
            .navbar .navbar-nav li a:focus {
              outline: 0;
            }
            .navbar-default,
            .navbar-inverse {
              border: 0;
              background-color: #233140;
            }
            footer {
              color: #fff;
            }
            footer h3 {
              margin-bottom: 30px;
            }
            footer .footer-above {
              padding-top: 50px;
              background-color: #2c3e50;
            }
            footer .footer-col {
              margin-bottom: 50px;
            }
            footer .footer-below {
              padding: 25px 0;
              background-color: #233140;
            }

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <!-- simple code -->
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <!-- simple code -->
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<!-- Begin page content -->
<header>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
        <div class="intro-text">
          <!-- simple intro -->
        </div>
      </div>
    </div>
  </div>
</header>

<footer class="text-center">
  <div class="footer-above">
    <div class="container">
      <div class="row">
        <div class="footer-col col-md-4">
          <h3>Location</h3>
          <p>3481 Melrose Place
            <br>Beverly Hills, CA 90210</p>
        </div>
        <div class="footer-col col-md-4">
          <h3>Around the Web</h3>
          <ul class="list-inline">
            <!-- some social networks -->
          </ul>
        </div>
        <div class="footer-col col-md-4">
          <h3>About Freelancer</h3>
          <p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-below">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          Copyright &copy; Author
          <?php echo date( "Y"); ?>
        </div>
      </div>
    </div>
  </div>
</footer>

#2

The way Bootstrap sees how you want to change sizes for different screen sizes are in the column size identifiers. And each number is a fraction of 12.

Bootstrap了解如何更改不同屏幕尺寸的大小的方式在列大小标识符中。每个数字都是12的一小部分。

<div class="footer-col col-md-4">

means you want the footer to take 4/12 of the screen on devices medium or higher. To designate that you want it to be different on different sizes, you would put something like

意味着你希望页脚在中等或更高的设备上占据屏幕的4/12。要指出你希望它在不同的尺寸上有所不同,你可以选择类似的东西

<div class="footer-col col-md-4 col-sm-12">

to mean that you want it to take up 4/12 of the screen on medium devices or larger, and 12/12 of the screen on small devices up to medium.

这意味着你希望它在中型设备或更大的屏幕上占据屏幕的4/12,在小型设备上占用12/12的屏幕直到中等。

#3

You have inline styling on your header <img> tag.

您的标题标记上有内联样式。

<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">

I would recommend trying to use a new class on that <img> tag, then apply a new @media query to adjust height for different screen sizes.

我建议尝试在该标签上使用新类,然后应用新的@media查询来调整不同屏幕尺寸的高度。

Also, having the .img-responsive class on that element may also be conflicting with the inline height styling.

此外,在该元素上具有.img响应类也可能与内联高度样式冲突。