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

我对模板有问题。在大屏幕上，它看起来很好，如下所示：

但当我调整浏览器大小时，内容不会向下推页脚。这是一张照片：

这是我的密码，太长了，请原谅我。 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>

我如何解决这个问题，使页面内容将页脚向下推…在任何大小的浏览器。

---

非常感谢您的帮助。

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。您的标题上有内联样式

assets/img/simple_img.png“alt=”“style=“height:200px；">

我建议尝试在

标记上使用一个新类，然后应用一个新的

@media

查询来调整不同屏幕大小的高度

---

此外，该元素上的.IMG响应类也可能与内联高度样式冲突。

<删除<代码>位置：绝对值； >在CSS中的<代码>页脚看来是有效的。绝对必要（请原谅双关语）

我提供了一个片段，其中删除了绝对位置，以及可能添加到媒体查询中的内容，该内容已被注释掉，但需要演示

/*粘性页脚样式
-------------------------------------------------- */
html{
位置：相对位置；
最小高度：100%；
}
身体{
/*按页脚高度排列的页边距底部*/
边缘底部：60px；
}
页脚{
宽度：100%；
/*在此处设置页脚的固定高度*/
高度：340px；
背景色：#F5；
}
/*自定义页面CSS
-------------------------------------------------- */
/*模板或粘性页脚方法不需要*/
body>容器{
填充：60px 15px 0；
}
.container.text静音{
利润率：20px0；
}
页脚>.container{
右侧填充：15px；
左侧填充：15px；
}
代码{
字号：80%；
}
/*!
*开始引导-自由职业者引导主题(http://startbootstrap.com)
*根据Apache许可证v2.0许可的代码。
*有关详细信息，请参阅http://www.apache.org/licenses/LICENSE-2.0.
*/
身体{
溢出x：隐藏；
}
标题{
文本对齐：居中；
颜色：#fff；
背景：#18bc9c；
}
标题.容器{
填充顶部：100px；
填充底部：50px；
}
@介质（最小宽度：768px）{
标题.容器{
填充顶部：200px；
填充底部：69px；
}
header.intro text.name{
字号：4.75em；
}
标题。介绍文字。技能{
字号：1.75em；
}
/*
****可选的****
页脚{
位置：绝对位置；
底部：0px；
}*/
}
@介质（最小宽度：768px）{
.导航条固定顶部{
填充：25px0；
-webkit转换：padding.3s；
-moz转换：padding.3s；
过渡：填充。3s；
}
.导航条固定顶部.导航条品牌{
字号：2em；
-webkit转换：all.3s；
-moz转换：all.3s；
过渡：全部3秒；
}
.navbar-fixed-top.navbar-shrink{
填充：10px0；
}
.navbar-fixed-top.navbar-shrink.navbar品牌{
字号：1.5em；
}
}
navbar先生{
文本转换：大写；
字体系列：蒙特塞拉特，“Helvetica Neue”，Helvetica，Arial，无衬线；
字号：700；
}
.导航栏a：聚焦{
大纲：0；
}
.navbar.navbar导航{
字母间距：1px；
}
导航栏导航李a：聚焦{
大纲：0；
}
.navbar默认值，
.导航条反转{
边界：0；
背景色：#233140；
}
页脚{
颜色：#fff；
}
页脚h3{
边缘底部：30px；
}
页脚。上面的页脚{
填充顶部：50px；
背景色：#2c3e50；
}
页脚{
边缘底部：50px；
}
页脚。下面的页脚{
填充：25px0；
背景色：#233140；
}

assets/img/simple_img.png“alt=”“style=“height:200px；”>
位置
梅尔罗斯广场3481号

加利福尼亚州贝弗利山庄，邮编90210

围绕网络
<div class="footer-col col-md-4 col-sm-12">

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