如何在調整大小時修復頁腳重疊內容

Question

我的模板有問題。 在大屏幕上，它看起來很好，像這樣：

但是，當我調整瀏覽器大小時，內容不會將頁腳縮小。 這是一張圖片：

這是我的代碼，這太長了，請原諒我。 的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>

這是我的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;
        }

我該如何解決這個問題，因此頁面內容會在任何規模的瀏覽器中向下推... 任何幫助表示贊賞。

Answer 1

刪除position:absolute; 從css的footer似乎工作。 也許考慮使用媒體查詢將其設置為絕對更大的屏幕尺寸，如果position:absolute是絕對的（請原諒雙關語）必要的。

我提供了一個刪除絕對定位的片段，以及媒體查詢的潛​​在添加內容，該內容已被注釋掉，但有證據表明。

 /* 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> 

Answer 2

Bootstrap看到您希望如何更改不同屏幕尺寸的大小的方式在列大小標識符中。 每個數字都是12的一小部分。

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

意味着您希望頁腳在中等或更高的設備上占據屏幕的4/12。 要指出你希望它在不同的尺寸上有所不同，你可以選擇類似的東西

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

這意味着你希望它在中型設備或更大的屏幕上占據屏幕的4/12，在小型設備上占用12/12的屏幕直到中等。

Answer 3

您的標題<img>標記上有內聯樣式。

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

我建議嘗試在該<img>標簽上使用新類，然后應用新的@media查詢來調整不同屏幕尺寸的高度。

此外，在該元素上具有.img響應類也可能與內聯高度樣式沖突。

Answer 4

添加“位置相對”類

<!-- Footer Starts -->
  <div class="container-fluid">
    <div class="navbar fixed-bottom position-relative">
      <p>You Footer Content<p>
    </div>
  </div>
<!-- Footer ends -->

適用於Bootstrap v4.3