css框架問題

我正在嘗試做這樣的頁面 - http://www.wickham43.supanet.com/tutorial/headerfooterfixexample.html 但我只想留下底部。所以我創造了這個，但這是行不通的。你能告訴我爲什麼？css框架問題

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Language" content="en" /> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<style type="text/css" media="screen,print"> 
body, 
html{ 
    margin:0; 
    padding:0; 
} 
div#middlewrap { 

    margin-left:16px; 
    padding-bottom:50px; 
} 

/* no positioning for IE5/Win - the whole page scrolls */ 
div#footerwrap { 
    width:100%; 
    position:absolute; 
    bottom:0; 
    left:0; 
    height:50px; 
} 
body>div#footerwrap { 
    position:fixed; 
} 
div#footer { 
    height:50px; 
    width:1520px; 
    margin:0 auto; 
} 

/* Styling rules to make this demo page look nice. */ 
body, 
html{ 
    font-family:"Trebuchet MS", Georgia, Verdana, serif; 
    color:#335500; 
    background:#e9e9e2; 
} 
div#header, 
div#footer { 
    background:#de7008; 
    color:#eee; 
} 
div #footer p { 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
div#footer a { 
    color:#fff; 
} 

p { 
    margin-bottom:0; 
    font-size:0.8em; 
    line-height:1.4em; 
} 
pre { 
    font-size:0.9em; 
    line-height:1.4em; 
} 

</style> 
</head> 

<body> 
<div id="middlewrap"> 

gfhgfhgfh 

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 

</div>  
<div id="footerwrap"> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

來源

2010-09-02 Ronny

適用於我：http://jsfiddle.net/qZhSm/ – ireddick 2010-09-02 12:37:33

at ie？對我來說不是.. – Ronny 2010-09-02 12:39:39

你是對的 - 它在IE中不起作用（無論如何不在7）。 – ireddick 2010-09-02 12:46:49

在這裏，你去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!-- make it play nice in IE --> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Language" content="en" /> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<style type="text/css" media="screen,print"> 
body, 
html{ 
    margin:0; 
    position: relative; 
    padding:0; 
} 
div#middlewrap { 
    margin-left:16px; 
    padding-bottom:50px; 
} 

/* no positioning for IE5/Win - the whole page scrolls */ 
div#footerwrap { 
    width:100%; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    height:50px; 
} 
body>div#footerwrap { 
    position:fixed; 
    bottom: 0px; 
} 
div#footer { 
    height:50px; 
    width:1520px; 
    margin:0 auto; 
} 

/* Styling rules to make this demo page look nice. */ 
body, 
html{ 
    font-family:"Trebuchet MS", Georgia, Verdana, serif; 
    color:#335500; 
    background:#e9e9e2; 
} 
div#header, 
div#footer { 
    background:#de7008; 
    color:#eee; 
} 
div #footer p { 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
div#footer a { 
    color:#fff; 
} 

p { 
    margin-bottom:0; 
    font-size:0.8em; 
    line-height:1.4em; 
} 
pre { 
    font-size:0.9em; 
    line-height:1.4em; 
} 

</style> 
</head> 

<body> 
<div id="middlewrap"> 

gfhgfhgfh 

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
        <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf gfdgfdgdf <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 

</div>  
<div id="footerwrap"> 
    <div id="footer"></div> 
</div> 
</body> 
</html>

來源

2010-09-02 13:24:03

非常感謝你！ – Ronny 2010-09-05 06:52:06

技術上@mathletics在我之前到達那裏:) – 2010-09-06 08:16:32

回答

相關問題