Question

我正在尝试在页面底部创建一个页脚，但我的body只覆盖了页面的一半。我已尝试body { height:auto;，height:1200px;和height:100%;，但不会调整大小。我只是把我的整个代码放在这里，也许还有别的东西在做反应。

Body should cover the whole page

HTML：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Artotek</title>
<script src="jquery-1.10.2.min.js">
</script>
<LINK REL="SHORTCUT ICON"
       HREF="favicon.ico">
</head>
<body>
<!-- KIELET -->
<div class="kielet">
 <nav>
 <!--Englanti-->

 <a href="en_index.html"><img class="icon" src="iconit/en.gif" title="in english" onmouseover="this.src='iconit/en_hover.gif'" onmouseout= "this.src='iconit/en.gif'"></a>

 <!--Ruotsi-->

 <a href="swe_index.html"><img class="icon" src="iconit/swe.gif" title="på svenska" onmouseover="this.src='iconit/swe_hover.gif'" onmouseout="this.src='iconit/swe.gif'"></a>

 <!--Venäjä-->

 <a href="ru_index.html"><img class="icon" src="iconit/ru.gif"  title="По русски" onmouseover="this.src='iconit/ru_hover.gif'" onmouseout="this.src='iconit/ru.gif'"></a>
 </div>

<div class="navigointi"> 
<ul>
<li><a href="tieto.html">Tietoa Meistä</a></li>
<li><a href="yhteys.html">Yhteystiedot</a></li>
</ul>
</div>
<div id="footer" style="bottom:0px; right:0px; width:100px; font-size:8px;">

</div>

<div id="teksti" style="position:absolute; width:100%; top: 40px; font-size: 20px; height:130px; margin-top:0px; text-align:center; ">
Tervetuloa
<br>
<br>
<p>Olemme startup innovatiivisten tuotteiden kehitysyritys<br>
Kysyttävää? <a href="yhteys.html" style="color:blue; text-decoration:underline;" title="Ota yhteyttä">Ota yhteyttä</a>!</p>
</div>
<div id="slidy" class="slidepart fl">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
<div class="sl_paginationpart">
    <ul id="slidya" class="slpagination">
        <li><a href="javascript: prevnext(0);" class="prev"></a></li>
        <li><a href="javascript: thisisit(0)" class="number select">1</a></li>
        <li><a href="javascript: thisisit(1)" class="number ">2</a></li>
        <li><a href="javascript: thisisit(2)" class="number ">3</a></li>
        <li><a href="javascript: thisisit(3)" class="number ">4</a></li>
        <li><a href="javascript: thisisit(4)" class="number ">5</a></li>
        <li><a href="javascript: prevnext(1);" class="next"></a></li>
    </ul>

<script type="text/javascript">
var slo=null;
var sola = Array();
var prev = 0;
var cur = 1;
var timi=null

$(document).ready(function() {
    sol = document.getElementById('slidy').getElementsByTagName('img')
    var sho = document.getElementById('slidya').getElementsByTagName('a');
    for(var i=1;i<sho.length-1;i++)sola.push(sho[i])        
    for(var i=1;i<sol.length;i++)sol[i].style.display = 'none';
    timi = window.setInterval('doslide()',5000);
})

function doslide()
{
    $(sol[prev]).fadeOut(500);
    $(sol[cur]).fadeIn(500);
    sola[prev].className = 'number'
    sola[cur].className = 'number select'

    prev = cur++;
    if(cur>sol.length-1)
    {
        cur=0;
        prev= sol.length-1;
    }
}

function prevnext(mode)
{
    window.clearInterval(timi);timi=null;

    if(mode)
    {
        if(cur>sol.length-1)
        {
            cur=0;
            prev= sol.length-1;
        }
        doslide();      
    }
    else
    {
        cur--;
        prev--;

        if(prev<0)
        {
            cur=0;
            prev= sol.length-1;
        }
        if(cur<0)
        {
            cur=sol.length-1;
            prev=cur-1 ;        
        }

        $(sol[cur]).fadeOut(500);
        $(sol[prev]).fadeIn(500);
        sola[cur].className = 'number'
        sola[prev].className = 'number select'  
    }
    timi = window.setInterval('doslide()',2000)
}

function thisisit(aiyo)
{
    cur = aiyo
    window.clearInterval(timi);timi=null;

    $(sol[cur]).fadeIn(500);
    $(sol[prev]).fadeOut(500);
    sola[cur].className = 'number select'
    sola[prev].className = 'number' 

    prev=cur
    ++cur;
    if(prev<0)prev = sol.length-1;
    timi = window.setInterval('doslide()',2000)     
}
</script>   
    </div>
    </div>
</div>
</div>
 <!--Twitter

<div class="twitter" style="width:50px; top:0px; margin-top:0px;">
<a class="twitter-timeline" href="https://twitter.com/ArtotekTmi" data-widget-id="381408956653899776">@ArtotekTmi Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>-->
<span style="bottom:0px; left:500px;">Tehnyt: Claudio Lintunen</span>
</body>
</html>

CSS：

body {
font-family:helvetica;
margin: auto;
min-height: 100%;
width: 100%;
}

#background {
background-image:kuvat/nainen.png;
background-repeat: none;
height: 100%;
width: 100%;
}

.fl {
    top:150px;
    width: 100%;
    left: 25%;
    transition: all;
    position: absolute;
}
.slidepart {
    width:700px;
    height:450px;
    overflow:hidden;
    position:relative;
    border:#218559 solid 2px;
    box-shadow:gray 2px 5px 5px;
}
.slidepart img {
    position:absolute;
    height:450px;
    border: black solid 1px;
}
.sl_paginationpart {
    display:block;
    background:#BE5252 no-repeat left;
    width:100%;
    height:1px;
    position:absolute;
    right:0px;
    bottom:0px;
    padding:6px;
    transition:all 0.5s ease
}
.sl_paginationpart:hover {
    height:15px;
    opacity: 0.8;
    background:#B80E39
}
ul.slpagination {
    margin:0px;
    padding:0px;
    list-style:none;
    font-family:helvetica;
    right: 0px;
}
ul.slpagination:hover {
    margin:0px;
    padding:0px;
    list-style:none;
    font-family:helvetica;
}
ul.slpagination li {
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
    height:100%
}
ul.slpagination li a {
text-decoration:none;
}
ul.slpagination li a.prev {
    width:14px;
    height:15px;
    display:block;
    margin-top: 2px;
}
ul.slpagination li a.next {
    width:14px;
    height:15px;
    display:block;
    margin-top: 2px;
}
ul.slpagination li a.number {
    background:lightgray;
    width:25px;
    height:4px;
    display:block;
    text-align:center;
    margin:0px 3px;
    font-size:0px;
    font-weight:bold;
    color:#A3916D;
    text-decoration:italic;
    font-family: helvetica;
    border-radius:5px 5px 2px;
    transition: all 0.5s ease;
}
ul.slpagination li a.number:hover {
    background:#977E79;
    color:lightgray;
    height:18px;
    font-size:10px;
}
ul.slpagination li a.select {
    background:#B78B59;
    color:white;
    text-decoration:none;
    text-decoration:italic;
    font-size:0px;
}

.sl_paginationpart:hover li a.select {
    height: 18px;
    font-size: 10px;
}

.sl_paginationpart:hover li a.number {
    height: 18px;
}

#logo {
opacity: 1;
}

.kielet {
top:0px;
width:100%;
background-color: #908967;
padding:0px;
height: 35px;
color: white;
}

.kielet nav {
text-align: left;
height: 35px;
}

.kielet a {
 display: inline;
 left: 0px;
}


.icon {
width: 50px;
height: 100%;
right: 0px;
float: right;
margin:0 10px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}

.parent {
font-family: Verdana;
height: 30px;
font-size: 20px;
transition: background 0.5s ease;
}

.parent:hover {
background: #C2C3C4;
}

.parent a {
color: black; 
text-decoration: none;
cursor: pointer;
}

.show ul
{   
    /*animation for show*/
    transition:max-height 1s;
    -webkit-transition:max-height 1s;
    max-height: 100%;
}

.navigointi 
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
}

.navigointi ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

.navigointi a
{
float:left;
width:6em;
top: 0px;
text-decoration:none;
color:white;
background: FFE97D;
padding:0.2em 0.6em;
border-right:1px solid white;
height:29px;
transition: all 0.5s ease;
}

.navigointi a:hover 
{
background-color:#FFF1B0;
color: #645406;
}

.navigointi li 
{
display:inline;
}

Answer 1

Fot sticking footer使用此方法：你只需要创建wrapper div并从那里获取页脚。然后在这个包装器中使margin-bottom等于页脚高度并创建一些推送div - 它将成为页脚的位置。看看这个：fiddle

Answer 2

将100% 也添加到html，如下所示：

html {
    height: 100%;
}

Answer 3

也许在关闭之前放一个div，并清楚地显示它们。

所以

<div class="clearBoth"></div>

式：

.clearBoth{ clear: both; }

HTML Body没有调整大小

3 个答案: