Question

我知道这可能正好盯着我，但我无法确定可能导致我问题的原因。我有一个页脚和一个iframe一起玩不好。我的页脚坐在我的iframe上面。我需要我的页脚坐在我的页面底部，就像我的所有其他页面一样，并且无论用户是否向上和向下滚动，都要留在那里。只需要它留在底部。我不太确定它是一个定位问题，一个div问题，如果它是页脚的问题，还是iframe的问题。我猜它是页脚的问题，但页脚放在我需要的所有其他页面上。这让我很困惑。对于网页设计来说仍然是新手，所以我仍然围着定位属性而不是我的头脑。这就是我所拥有的：

CSS：

/*BODY*/
html, body {
    background:White;
    font-family:Segoe UI;
    width:100%;
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    min-height: 100%;
    position:relative;
}

#body {
    padding:10px;
    padding-bottom:460px;
}

.footer1 {
    background-color:#494949;
    display:inline-block;
    width:100%;
    height:360px;
    position:absolute;
    bottom:100px;
    left: 0;
}

.footer2 {
    background-color:black;
    display:inline-block;
    width:100%;
    height:100px;
    /*margin-top:0px;*/
    position:absolute;
    bottom:0;
    left:0;
}

HTML：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Pagina De Informacion General</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
        <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="CaseTypes/style.css" type="text/css" media="screen"/>
        <script src="/NewWebTest/jquery.min.js"></script>
    </head>

    <body>
        <div id="wrapper">

            <!--HEADER-->
            <div id="header">
            </div>

            <!--PAGE TITLE-->
            <div id="pageTitle">
                Pagina De Informacion General
            </div>

            <!--NAVIGATION MENU-->
            <div id="navigation">
            </div>

            <br/>

        <div id="body" style="height:100%">
        <div style="height: 532px">
            <div id="openingImage">
                <img src="../images/Blended Courthouse JPG Less Opacity.jpg" alt="Courthouse" height="274" width="1271"/>           
            </div>

            <!--DIV LEFT: ANNOUNCEMENTS-->
            <div id="annouceDiv">

                <div class="sectionHeader">
                    &nbsp&nbsp Ubicación Central
                </div>
                <br/>

                <div class="announceSection" style="text-align:center">
                    Pima County Consolidated Justice Court<br/>
                    240 N. Stone Avenue, segundo piso<br/>
                    Tucson, AZ 85701<br/>
                    (520) 724-3171 <br/><br/>   

                    Para obtener información sobre estacionamiento, visite el sitio web de la Ciudad de Tucson:<br/>
                    <a href="https://www.tucsonaz.gov/park-tucson/where-can-i-park-downtown" target="_blank">City of Tucson Downtown Parking</a>                
                </div>

                <!--SECTION DIVIDER IMAGE-->
                <div class="breakImageDiv">
                    <img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider"/>
                </div>

            </div>

            <div id="annouceDiv">

                <div class="sectionHeader">
                    &nbsp&nbsp Horario y Cierre por Dias Festivos
                </div>
                <br/>

                <div class="announceSection" style="text-align:center">
                    Lunes a Viernes, 8:00 a.m. to 5:00 p.m., excepto días festivos<br/>
                    <table style="margin:auto; width:100%">
                        <tr>
                            <td>Año Nuevo</td>
                            <td>Día del Obrero</td>
                        </tr>
                        <tr>
                            <td>Día de Martin Luther King</td>
                            <td>Día del Armisticio</td>
                        </tr>
                        <tr>
                            <td>Día de los Presidentes</td>
                            <td>Día de Acción de Gracías</td>
                        </tr>
                        <tr>
                            <td>Día de los Caídos</td>
                            <td>Día despues de Acción de Gracías</td>
                        </tr>
                        <tr>
                            <td>Día de la Independencia</td>
                            <td>Navidad</td>
                        </tr>
                    </table>                
                </div>

                <!--SECTION DIVIDER IMAGE-->
                <div class="breakImageDiv" style="width: 100%">
                    <img src="../images/EchoPet_Line_Break_PNG.png" alt="Divider" style="width:100%" height="39"/>
                </div>

            </div>

            </div>

        <div style="float:left; width:100%">
            <div id="annouceDiv" style="width:100%">

                <div class="sectionHeader" style="margin-right:60px">
                    &nbsp&nbsp Plano
                </div>
                <br/>

                <div class="announceSection" style="text-align:center; margin-right:60px">

                        <iframe 
                            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.2154892306807!2d-110.97141080000001!3d32.22536379999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d6711e54972b5f%3A0x655603b7f78ec698!2s240+N+Stone+Ave%2C+Tucson%2C+AZ+85701!5e0!3m2!1sen!2sus!4v1422889378316"
                            width="95%" height="450" postion="relative" bottom="460px" frameborder="0" style="border:0">
                        </iframe>

                </div>

                <!--SECTION DIVIDER IMAGE-->
                <div class="breakImageDiv" style="width:100%">
                    <img src="../images/EchoPet_Line_Break_PNG.png" class="breakImagePic" alt="Divider" style="width:100%"/>
                </div>

                </div>

            </div>

        </div>

            <!--FOOTER-->
            <div id="footer" style="position:relative; bottom:0">
            </div>

         <!--Javascript for header, nav, and footer-->                          
        <script type="text/javascript" src="/NewWebTest/jquery.min.js"></script>
        <script type="text/javascript" src="/NewWebTest/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
            $("#header").load("/NewWebTest/header.html");
            $("#navigation").load("/NewWebTest/navigation.html");
            $("#footer").load("/NewWebTest/footer.html");
            });
        </script>

    </div>

</body>

</html>

中间的很多其他CSS样式都排成一行并且很好，除非有要求，否则不需要添加它们。我在这里和其他文章一直到处寻找过去的一天，并且找不到我想要的东西。任何帮助将不胜感激。

Answer 1

在<div id="footer">添加样式clear:both;，因为您拥有iframe float:left，因此它位于您的iframe之上。你需要清理你的花车。

IFrame问题：页脚位于iframe

1 个答案: