html/css內容不伸展

在我的頁面我想要內容（頁面上的紅色）擴展到頁腳（黃色）......我找不到任何方法來解決這個過去3天。請幫我..html/css內容不伸展

index.html 

<body> 
<div id="wrapper"> 
    <div id="header">HEADER</div> 
    <div id="content">CONTENT</div> 
    <div id="footer">FOOTER</div> 
</div> 
</body>

這是我的style.css

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
    background-color: blue; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    background:#5ee; 
} 
#content { 
    padding:10px; 
    padding-bottom:80px; 
    background-color: red; 
    width: 1000px; 
    margin: 0 auto; 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

來源

2013-02-13 fish40

你將需要使用javascript來實現這個 – Pete 2013-02-13 13:39:53

我應該怎麼做javascript – fish40 2013-02-13 13:40:58

這個人試圖實現同樣的事情：http://stackoverflow.com/questions/13836301/set-a-min-height-on- content-container/13836477＃13836477 – Pete 2013-02-13 13:46:14

嘗試添加最小高度爲＃內容CSS有這樣的例子：

#content { 
    padding:10px; 
    padding-bottom:80px; 
    background-color: red; 
    width: 1000px; 
    margin: 0 auto; 
    min-height:600px; 
}

看這裏：http://jsfiddle.net/DAQ7W/

另一個訣竅是使#wrapper與#content具有相同的背景顏色。 ;）

來源

2013-02-13 13:39:41 henser

這樣做爲你工作？ – henser 2013-02-13 13:43:09

是的，謝謝 – fish40 2013-02-13 13:49:56

你在尋找的是一個'粘腳'我想。在這種情況下使用這個腳本我寫道：

的Html

<div id="pagewrap"> 

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

</div> 

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

的Javascript

$(function() { 

    function positionFooter() { 

     var windowHeight = $(window).height(); 
     var documentHeight = $('#pagewrap').height(); 

     if (windowHeight > ($('#content').height() + $('#header').height())) { 
      var pagewrapHeight = windowHeight - $('#footer').height(); 
      $("#pagewrap").height(pagewrapHeight); 
     } 
    } 

    positionFooter(); 
    $(window).resize(positionFooter) 

});

的CSS

body { background: red; } 
#header { text-align: center; height:100px; background: green; } 
#content { text-align: center; height: 300px; background: red; } 

#footer { 
    position: relative; 
    height: 35px; 
    line-height: 35px; /* Height footer */ 
    text-align: center; 
    clear:both; 
    background: yellow; 
    color: #fff; 
    width: 100%; 
}

來源

2013-02-13 13:59:39 Jonathan

html/css內容不伸展

回答

相關問題