底部图像不在页面底部齐平

时间：2016-02-05 08:53:45

标签： javascript jquery html css html5 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SOS</title>
<link href="first.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script><script src="http://use.edgefonts.net/amatic-sc:n4:default.js" type="text/javascript"></script>
</head>

<body onLoad="MM_preloadImages('images/slideshow1_over.jpg','images/slideshow2_over.jpg','images/slideshow3_over.jpg','images/news1_over.png','images/news2_over.png')">

<div id="container">

<div id="navbar">
  <img src="images/logo.png" alt="" width="230" height="70" class="floatleft" id="logo"/>
<div id="menu">
<ul><li>HOME</li>
  <li>ABOUT US</li>
  <li>ABOUT ORANGUTANS</li>
  <li>
    OUR WORK
    <ul>
      <li>PROJECTS</li>
      <li>CAMPAIGNS</li>
      </ul>
        </li>
  <li>DONATE</li>
  <li>CONTACT US</li>
  <li>SHOP</li>
</ul>
</div>
</div>

<div class="slideshow">
  <div><img src="images/slideshow1.jpg" alt="" width="1105" height="576" usemap="#Map" id="Image1"/>
    <map name="Map">
      <area shape="rect" coords="698,440,1070,544" href="#" onMouseOver="MM_swapImage('Image1','','images/slideshow1_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
    </map>
  </div>
  <div><img src="images/slideshow2.jpg" alt="" width="1105" height="576" usemap="#Map2" id="Image2"/>
    <map name="Map2">
      <area shape="rect" coords="734,438,1058,542" href="#" onMouseOver="MM_swapImage('Image2','','images/slideshow2_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
    </map>
  </div>
  <div><img src="images/slideshow3.jpg" alt="" width="1105" height="576" usemap="#Map3" id="Image3"/>
    <map name="Map3">
      <area shape="rect" coords="730,436,1058,544" href="#" onMouseOver="MM_swapImage('Image3','','images/slideshow3_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
    </map>
  </div>
</div>

<div class="news">
  <div><img src="images/news1.png" alt="" width="638" height="322" usemap="#Map4" id="Image4"/>
    <map name="Map4">
      <area shape="rect" coords="440,262,612,286" href="http://www.takepart.com/article/2015/10/22/orangutans-are-dying-indonesia-burns" target="_blank" onMouseOver="MM_swapImage('Image4','','images/news1_over.png',1)" onMouseOut="MM_swapImgRestore()">
    </map>
  </div>
  <div><img src="images/news2.png" alt="" width="638" height="322" usemap="#Map5" id="Image5"/>
    <map name="Map5">
      <area shape="rect" coords="444,264,608,284" href="http://www.eco-business.com/news/palm-oil-expands-in-aceh/" target="_blank" onMouseOver="MM_swapImage('Image5','','images/news2_over.png',1)" onMouseOut="MM_swapImgRestore()">
    </map>
  </div>
</div>

<div id="video">
<div id="iframe">
<iframe width="435" height="280" src="https://www.youtube.com/embed/SE_Gw9GzdZY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
  <img src="images/footer.png" width="1105" height="64" alt=""/></div>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

</body>
<script type="text/javascript">
      $('.slideshow').slick({autoplay:true,fade:false, dots:true, arrows:false});
      $('.news').slick({autoplay:true,fade:true, dots:false, arrows:true});
      </script>

</html>

@charset "UTF-8";
html {
    margin:0px;
    padding:0px;
}
body {
    background-image:url(images/background3.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin:0px;
    padding:0px;
}

#container {
    width:1105px;
    margin:0 auto;
}

#navbar {
    background-color: rgba(0,0,0,0.70);
    width:1105px;
    height:100px;
}

ul {
    po
    display: inline;
    list-style-type:none;
}

ul li {
    font-weight: 400;
    font-size: 27px;
    display: inline-block;
    margin-right: 0px;
    position: relative;
    padding: 19px 20px 27px 28px;
    cursor: pointer;
    font-family: amatic-sc;
    font-style: normal;
    color: #F2F2F2;
}
ul li:hover {
    color: #fff;
    text-shadow: 0px 0px 10px #13F909;
}
ul li:hover li{
    text-shadow: none;
}

ul li ul {
  position: absolute;
  padding:0;
  width: 150px;
  top:80px;
  left:0;
  visibility: hidden;
}
ul li ul li { 
  background-color:rgba(0,0,0,0.70); 
  display: block; 
  color: #fff;
}
ul li ul li:hover { background-color:rgba(0,0,0,0.70); text-shadow: 0px 0px 10px #13F909; }

ul li:hover > ul {
  visibility: visible;
}
ul.sub{
  top:0;
  left:154px;
  visibility:hidden;
}

.floatleft{
    float:left;
}

#logo {
    margin-top:15px;
    margin-left:20px;
}

#menu {
    position:relative;
    z-index:100;
    padding-top:4px;
}

.slideshow {
    padding-top:20px;
}

.news {
    width:638px;
    height:322px;
    float:left;
}

#video {
    background-color:rgba(0,0,0,0.70);
    width:458px;
    height:322px;
    margin-left:647px;
    position:absolute;
}

#iframe {
    padding-top:21px;
    padding-left:11.5px;
}

#footer {
    bottom:50px;
}

以上是我的代码，基本上，我的页脚div包含一个作为我的页脚的图像，但它不是与我的页面底部齐平。我尝试将负边距，填充和底部放置，但它没有移动。

这是一张图片，可以更清楚地显示问题http://imgur.com/rk4DOuk

2 个答案:

答案 0 :(得分：1)

请在css中添加这些样式。希望它能奏效。

html, body {
    height: 100%;
}

答案 1 :(得分：1)

每个人都会要求您将footer与position:absolute; bottom:0px;和body与height:100%; margin:0px;一起使用，因此我建议您选择将页脚粘贴在body { height: 100vh; width:100%; margin:0px; } #bigcontainer { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; min-height: 100%; background: plum; } #footer { background: indigo; width: 100%; height: auto; text-align: center; -webkit-flex: 0 0 64px; flex: 0 0 64px; } #picture { vertical-align: bottom; width: 100%; height: 64px; } #content_container { margin-left: 15px; -webkit-flex: 1 1 auto; flex: 1 1 auto; }上页面底部没有将其设置为绝对＆＃39;：

＆＃13;
＆＃13; 
<div id=bigcontainer>


<div id="content_container">
<h1>Sticky Footer</h1>
<p>text_A</p><p>text_B</p><p>text_C</p><p>text_D</p><p>text_E</p>
</div>

<div id="footer">
<img id="picture" src="http://i.imgur.com/T6Q4PMw.png" alt=""/>
</div>
</div>
＆＃13; 
public function getLocalizedRoutes ()
{
    if ( null !== $this->localizedRoutes ) {
        return $this->localizedRoutes;
    }

    $cache = $this->getConfigCacheFactory()->cache(
        $this->options['cache_dir'].'/'.CachingMetadata::CACHE_FILE,
        function (ConfigCacheInterface $cache) {
            $content = CachingMetadata::getInstance()->dump();
            $cache->write($content);
        }
    );

    require_once $cache->getPath();

    return $this->localizedRoutes = LocalizedMetadata::getInstance();
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题