Question

好的，所以我的页脚工作正常，直到我安装了responsiveslides。它位于页面的底部，位置：绝对，不固定，但现在它停留在页面的中间，在它下面有空格。我知道这个位置：绝对让它保持在最后一个锚定元素之下，但我不明白为什么它不会支持div并且只是在幻灯片下面。

代码段示范：

＆＃13;

import requests
from django.core.management.base import BaseCommand
from aggregator.WorldBank.models import Projects

class Command(BaseCommand):
    def handle(self, **options):
        response = requests.get("https://search.worldbank.org/api/v2/projects?format=json&countryshortname_exact=India&source=IBRD&kw=N&rows=776")
        data = response.json()
        projects = data['projects']

        for project in projects:
            print(projects[project])
            print("\n\n")

            data = projects[project]

            Projects.objects.create(

                project_id = data['id'],
                project_name = data['project_name'],
                status = data['status'],
                country = data['countryshortname'],
                locations = data['locations'],
                mjtheme = data['mjtheme'],
                project_docs = data['projectdocs'],
                source = data['source'],
                mjtheme_namecode = data['mjtheme_namecode'],
                docty = data['docty'],
                countryname = data['countryname'],
                countrycode = data['countrycode'],
                themecode = data['themecode'],
                theme_namecode = data['theme_namecode'],
                project_url = data['url'],
                totalcommamt = data['totalcommamt'],
                mjthemecode = data['mjthemecode'],
                sector1 = data['sector1'],
                theme1 = data['theme1'],
                theme2 = data['theme2'],
                theme3 = data['theme3'],
                projectinfo = data['projectinfo'],
                country_namecode = ['country_namecode'],
                p2a_updated_date = data['p2a_updated_date'],
                p2a_flag = data['p2a_flag'],
                project_abstract = data['project_abstract']

                )

＆＃13;

.slideshow-container {
    clear: both;
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    z-index: 80;
}

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
        -webkit-backface-visibility: hidden;
        position: relative;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
}

.rslides li:first-child {
            position: relative;
            display: block;
            float: left;
}

.rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
}

#continut {
    height: 1000px;
}

#footer {
    clear:both;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #F28A00;
}

#footer ul {
        list-style-type: none;
        margin: 0;
        padding: 1.041vw;     
}

#footer li { 
        font-size: 0.9vw;
        font-weight:normal;
        display: inline;
        margin-left: 2.604vw;
        padding-right: 0.78125vw;
        padding-bottom: 0.263vw;
}

＆＃13;

Answer 1

将absolute更改为inherit中的#footer，您可能想要删除bottom: 0;

＆＃13;

.slideshow-container {
    clear: both;
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    z-index: 80;
}

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
        -webkit-backface-visibility: hidden;
        position: relative;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
}

.rslides li:first-child {
            position: relative;
            display: block;
            float: left;
}

.rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
}

#continut {
    height: 1000px;
}

#footer {
    clear:both;
    position: inherit;
    right: 0;
    left: 0;
    background-color: #F28A00;
}

#footer ul {
        list-style-type: none;
        margin: 0;
        padding: 1.041vw;     
}

#footer li { 
        font-size: 0.9vw;
        font-weight:normal;
        display: inline;
        margin-left: 2.604vw;
        padding-right: 0.78125vw;
        padding-bottom: 0.263vw;
}

＆＃13;

<div class="slideshow-container">

            <ul class="rslides">
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img2.jpg" alt=""></li>
                <li><img src="img/img3.jpg" alt=""></li>
            </ul>
            <script src="js/sshow.js"></script>
        </div>
            <div id="continut"></div>
            <div id="continut2"></div>
            <div id="continut3"></div>
            <footer id="footer">
                <ul>
                    <li id="nume">x</li>
                    <li class="copyright">Copyright Ⓒ 2017</li>
                </ul>
            </footer>     
            </div>

＆＃13;

Answer 2

简单方法：设置：body{position: relative;}。第二种方式：你可以将你的页脚包含在另一个元素中：position：relative：

＆＃13;

.slideshow-container {
    clear: both;
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    z-index: 80;
}

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
        -webkit-backface-visibility: hidden;
        position: relative;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
}

.rslides li:first-child {
            position: relative;
            display: block;
            float: left;
}

.rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
}

#continut {
    height: 1000px;
}

#footer {
    clear:both;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #F28A00;
}

#footer ul {
        list-style-type: none;
        margin: 0;
        padding: 1.041vw;     
}

#footer li { 
        font-size: 0.9vw;
        font-weight:normal;
        display: inline;
        margin-left: 2.604vw;
        padding-right: 0.78125vw;
        padding-bottom: 0.263vw;
}

＆＃13;

<div class="slideshow-container">

            <ul class="rslides">
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img2.jpg" alt=""></li>
                <li><img src="img/img3.jpg" alt=""></li>
            </ul>
            <script src="js/sshow.js"></script>
        </div>
            <div id="continut"></div>
            <div id="continut2"></div>
            <div id="continut3"></div>
            <div style='position:relative'><footer id="footer">
                <ul>
                    <li id="nume">x</li>
                    <li class="copyright">Copyright Ⓒ 2017</li>
                </ul>
            </footer>    
            </div>
            </div>

＆＃13;

Answer 3

只需删除#footer jsfiddle中的bottom:0。然后一切正常。

响应式幻灯片和页脚定位

3 个答案: