Question

我有一个回应页面。我想在此页底部修复页脚。我进行了很多搜索，找到了许多可行的解决方案。但是，当涉及到响应页面时，所有这些都将失败。问题是，当我设置页脚的位置固定时，一旦减小屏幕尺寸，页脚将停留在原处并被内容覆盖。我设置z-index使其在外层。然而。它停留在屏幕中间，而高度变大并且内容在屏幕下方。我知道我制作的页面布局看起来不正确，但是我不知道要更改什么。请查看代码，并向我提出更改建议。注意： 1-我使用JavaScript来使边距顶部随屏幕尺寸变化 2-我使用Django作为后端，并将基本页面扩展到此表单页面

这是基础页面：

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" 

    <meta name="viewport" content="width=device-width,initial-scale=1">

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href=" {% static 'towns/style/bootstrap_3.3.7_dist/css/bootstrap.min.css' %}" >
    <link rel="stylesheet" type="text/css" href="{% static 'towns/style/bootstrap_3.3.7_dist/css/bootstrap_theme.min.css' %}">
    <!-- to add future links when it is needed -->
    {% block links %}
    {% endblock %}

    <!-- main bar links -->
    <link rel="stylesheet" type="text/css" href="{% static 'towns/style/list_page/header.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'towns/style/list_page/css/font_awesome.min.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'towns/style/base/base.css' %}">

    <link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa|Reem+Kufi" rel="stylesheet">
</head>
<body>
    <div class="container_sl">
        <div class="main">
            <header class="global-header">
                <div class="main-container">
                    <div>
                      <a class="header-logo" style="text-decoration:none;" name="" href="#"> </a>
                    </div>

                    <nav class="main-search-cat">

                            <ul class="breadcrumbs" id="menu">

                                <!-- links to the main pages -->
                                <span>
                                    <li class="crumb section">
                                        <a href="http://127.0.0.1:8000/towns/{{post_city}}">  </a>
                                    </li>

                                </span>


                            </ul>

                    </nav>

                    <!-- *********************************** -->
                    <!-- start of user links -->
                    <!-- *********************************** -->
                    <div id = "userlinks">
                        <div id="nav">
                            <ul >
                                <li>

                                </li>
                            </ul>
                        </div>

                    </div>

                </div> 
            </header>
            <section class="m-container">
                <div class="ar-contns">
                    {% block content%}
                    {% endblock %}
                </div>  
            </section>

        </div>

    </div>

    <footer class="footer">
            <div class="footer-wr">
                <ul>
                    <li></li>
                </ul>
            </div>
    </footer>

<!-- footer container end -->

    <script type="text/javascript" src=" {% static 'towns/javascript/jquery_3.1.1.min.js' %}">
    </script>



    <!-- adjust m-container top margin for small screen -->
    <script>

        // to fix the s-container top margin for small screen
        function fixSecondTop() {
                $(".m-container").css({
                "margin-top": $(".main-container").outerHeight()+ 50
                });
        }

        fixSecondTop();

        $(window).resize(function () {fixSecondTop();});



        // to fix the footer top margin for small screen
        function fixFooterTop() {
                $(".footer").css({
                "margin-top": $(".main-container").outerHeight() + 20
                });
        }

        fixFooterTop();

        $(window).resize(function () {fixFooterTop();});


    </script>

</body>
</html>

这是表单页面：

{% extends "towns/salehslist/base.html" %}
{% block links %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 
'towns/style/complains/complains_form.css' %}">
{% endblock %}


{% block content %}
<center class='center'>
    <div>
        <form>
            <h2 class="salehslist" id="SL_text"> 
                <center>  </center> 
            </h2>



            <div >
                <div>
                            {% csrf_token %}
                            {% if form.name %}
                                {% if form.name.errors%}
                                {{form.name.errors}}
                                {% elif form.non_field_errors%}
                                {{ form.non_field_errors }}
                                {% endif %}
                            {%endif%}
                </div>
            </div>

                    <div >
                                {{form.name}}

                    </div>
                    <label >

                                {{form.name.label_tag}}

                    </label>
                </div>
            </div>


            <div >
                <button type="submit"   > submit </button>
            </div>

        </form>
    </div>
</center>

{% endblock %}

这是基本页面的CSS

/* beginning of header styling*/
body{
margin-top:0;
margin-left:0;
}
.main-container{
position:absolute;
top:0px;
left:0px;

background-color:#eeeeee;   
z-index: 10;
display:block;
width:100%;
height:50px;
box-sizing:border-box;
overflow: hidden;
border-bottom: 2px solid #ccc;
}

.header-logo {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background-color: #fff;
border: 2px solid #ccc;
float: left;
line-height: 1.5;
margin: 0 auto;
padding: 1em;
padding-top:0px;
text-decoration:none;
font-family: 'Aref Ruqaa', serif;
font-size: 15px;
color: #304ffe  ;
text-align: center;
font-weight: bold;
position:relative;
left:20px;
top:5px;

}

.main-search-cat{
float: left;
font-size: .9375em;
min-height: 1.3em;
position: relative;
margin-left: 50px;
margin-top: 15px;
}
 /*setting anchor color*/
a {
color: #304ffe;
}
a:visited {
color: #304ffe;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
display:inline;
}

.breadcrumbs-form{
position:relative;
left:50px;
margin-bottom: 0px !important;
margin-top: 0px !important;
min-height: auto !important;
padding-bottom: 10px !important;
padding-top: 10px !important;
width: auto;
float: left;  
}

/* userlinks */

#userlinks{
float:right;
top:0px;
left:0px;
}
#userlinks #nav{
padding-top: 15px;
padding-right: 30px
}
#userlinks #nav li{
float:right;
list-style:none;
display:inline-block;
padding-right: 10px;
}

#userlinks #nav li a{
color: #304ffe;;
}

.bar{
color:#9e9e9e;
float:right;
list-style:none;
display:inline-block;
padding-right: 10px; 
}

.favorites{
background-color: #ffc;
}
.banished{
background-color: #ffccbc;
}
.glyphicon-star{
color:#ffab00;
padding-right: 5px;
}

.glyphicon-trash{
color:#bf360c;
padding-right: 5px;  
background-color: #ffccbc;
padding-left: 10px;
padding-right: 10px;

}

/* media settings for small screens */
@media screen and (max-width: 992px){
.main-container{
    height:auto;
}
ul#menu li {
    display: block;
}  

#userlinks #nav li{
    display:block; 
    clear:both;   
}
#userlinks #nav{
    padding-right: 5px 
}
.bar{
    display:none;
}
}

@media screen and (max-width: 720px){
.main-container{
height:auto;
padding-bottom: 5px;
clear:both;
}
#userlinks{
float:left;
top:0px;
left:0px;
}
 #userlinks #nav li{
float:left;
list-style:none;
display:inline-block;
padding-left:110px;
clear:both;
}
}
/* end of header styling*/


/* beginning of footer styling*/


.container_sl{
min-height: 100vh;
}

.main{
/*overflow:auto;*/
padding-bottom: 50px;
}

.m-container{

}

.ar-contns{
float: right;
font-size: 1.5em;
direction: rtl;
}
/*m container (the container contains contents) */


/*footer styling*/
.footer{
background-color: #000;
position: relative;
height:50px;
margin-top: -50px;

width:100%;
float:right;
box-sizing:border-box;
background-color: #eee;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
clear: both;
}

.footer-wr li {
position: relative;
list-style: none;
left:30%;
padding-left:10px;
top:7px;
display:inline;
float:left;
font-size: 1em;     
text-align: center;
vertical-align: middle;
}

/* to adjust horizontal line */
hr {
color: #ccc;
background: #ccc;
height: 2px;
border: 0;
}

/*responsive screen*/

/*showing the side-nav for small screen*/
@media screen and (max-width:992px){

/*footer setting*/
.footer{
    height:auto;
    padding-bottom: 20px;
    padding-right:40%;
    text-align: center;
}
.footer-wr li{
    float:none;
    display:list-item;
}

}

/* end of footer styling */

这是表单页面的

body{
margin-top:0;
margin-left:0;
}
.salehslist {
font-family: 'Aref Ruqaa', serif;
font-size: 60px;
text-decoration:none;
color: #304ffe  ;
text-align: center;
font-weight: bold;
padding-bottom: 50px;
text-decoration:none;
}
.center{
height:;
}

无论屏幕大小如何，我都希望页脚始终位于页面底部

Answer 1

尝试一下

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer">
<div class="footer-wr">
                <ul>
                    <li>sd</li>
                </ul>
            </div>
</footer>

Answer 2

使页脚具有动态高度的唯一方法是所有父项（包括页脚）的flex父元素（可以是body）和列方向。然后对页脚项目使用flex grow来填充底部空间。此解决方案要求父元素至少为100％vh。

Answer 3

当正文中的内容太小或不足时，在将窗口调整为不同的屏幕尺寸时，页脚会继续更改位置。但是，您应该尝试在体内放置足够的内容，以帮助将页脚向下推到底

footer { position: absolute; bottom: 0; right: 0; left: 0; }

如果希望页脚随时贴在底部，可以用“位置：固定”代替“位置：绝对”。

如何在响应页面底部固定页脚？

3 个答案: