粘滯頁腳時無法獲得全尺寸頁眉

Question

我有一個用於製作我的主要內容的頁眉，頁腳和側欄的模板。使頁腳粘稠我添加了一些display: table-row;到我的CSS，但它導致我的標題縮小了100％的大小。因爲width:100%不能正常工作，所以如何使它成爲100％。

http://jsfiddle.net/XZDap/

HTML

<div id="wrapper"> 

    <div id="header"> 
     header header header header header 
    </div> 

    <div id="main"> 
John Edward Brownlee was Premier of Alberta, Canada, from 1925 to 1934 as leader of the United Farmers of Alberta (UFA) caucus. After winning the 1926 election, his successes included obtaining control of Alberta's natural resources from the federal government and selling the money-losing railways to help balance the provincial budget. His government's fortunes declined after the 1930 election. Agricultural prices collapsed, throwing many farmers into poverty. He tried to broker deals between farmers and banks, but found neither side eager to compromise. In 1933, Prime Minister R. B. Bennett named Brownlee to the Royal Commission on Banking and Currency as a representative of western interests and unorthodox viewpoints. While Brownlee concurred with the commission's ultimate recommendation for the creation of a central bank, he also made his own recommendations. In 1934 he was sued for the seduction of Vivian MacMillan, a family friend and a secretary in his government's attorney-general's office, who claimed that they had carried on an affair for three years. The jury sided with MacMillan despite Brownlee's denials and, in deference to public outrage, he resigned as premier. (Full article...) 


    </div> 

    <div id="sidebar"> 
     sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar 

    </div> 


</div> 

<div id="footer"> 
    footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer 
</div> 

CSS

html, body {height: 100%;} 

body 
{ 
display: table; 
} 

#header, 
#main, 
#footer 
{ 
    display: table-row; 

} 

#header, 
#footer 
{ 
    height: 1px; 
width: 100%; 
} 

#wrapper { 
    height: auto; 
} 

#wrapper 
{ 
width:90%; 
margin:0 auto; 
background-color: #FFFFF0; 
min-height: 100%; 

} 

#main 
{ 

width:75%; 
float:left; 
background-color: #FFF0FF; 
} 

#sidebar 
{ 

width:25%; 
float:right; 
background-color: #F0FFFF; 
} 

#header 
{ 
background-color: #FFDDFF; 
} 

#footer 
{ 
background-color: #DDDDDD; 
position:relative; 
clear:both; 
} 

Answer 1

添加display: table您#wrapper

DEMO http://jsfiddle.net/kevinPHPkevin/XZDap/2/

#wrapper { 
    width:90%; 
    margin:0 auto; 
    background-color: #FFFFF0; 
    min-height: 100%; 
    display: table; 
}