3行div與100％的高度內容總是

-7

我有3行div的佈局頁腳底部，但我需要內容div始終全長從頁眉到頁腳。裏面的內容div我也有一個iframe，我需要這個iframe始終在100％的conent高度，然後100％heigt的頁眉和頁腳之間的空間。這是我的（樣品）頁：3行div與100％的高度內容總是

<body> 
     <div id="container"> 
      <div id="header"> 
        logo 
      </div> 
      <div id="content"> 
       <h2 id="appname"><img alt="App" src="/images/b_nextpage.png">&nbsp;Home</h2> 
       <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> 
      </div> 
      <div id="footer"> 
       <button name="menu" type="button" id="menuopen"><img alt="App" src="/images/s_process.png">&nbsp;<b>Menu</b> 
       </button> 
      </div> 
     </div> 
    </body>

這是我的CSS：

html, body { 
font-family: sans-serif; 
padding: 0em; 
margin: 0em; 
color: #444; 
background: #fff; 
text-align: center; 
height: 100%; /* Important */ 
width: 100%; 
} 

#container { 
margin: 0px auto; 
text-align: center; 
height: 100%; 
}

感謝推進

來源

2012-06-20 GhostMaster75

如果我有解決我的問題我不會寫它？無論如何我都在尋找解決方案的三天。如果你想幫助自己，我很感激耐心，但否則我真的不明白你的論點，我們在這裏要求並幫助灌輸。 – GhostMaster75

藉口？我問的是什麼問題？即使我已經通過Google搜索了一個解決方案，但我不知道該怎麼做......但我不應該得到-1。什麼樣的想法是？ – GhostMaster75

他們低估了你，因爲你沒有說出你的實際問題是什麼，你只是發佈了代碼，並說你想要什麼。什麼在你的網頁上打破，你到底想要克服什麼突破？ – huzzah

以此爲你的標記：

<div id="wrapper"> 
    <div id="header">HEADER</div> 
    <div id="content"> 
     <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> 
    </div> 
    <div id="footer">hi</div> 
</div>

，這是你的CSS：

html, body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    position: relative; 
} 

#header { 
    height: 40px; 
    background-color: green; 
    color: #fff; 
} 

#content { 
    position:absolute; 
    bottom:40px; 
    top: 40px; 
    width:100%; 
    overflow: auto; 
    background-color: #333; 
    color: #666; 
} 

#footer { 
    height: 40px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    background-color: blue; 
    color: #fff; 
}

這是否讓你對你的方式？

來源

2012-06-20 20:38:43

好的..這是工作..沙克斯 – GhostMaster75