調整到瀏覽器窗口

的高度我要實現100％的高度，以瀏覽器下面的佈局。調整到瀏覽器窗口

enter image description here

僅在需要時和頁腳應在瀏覽器底部顯示的內容區域應該是滾動的，。

但試了很多次後，我用下面的代碼得到這個一個

enter image description here

。

html { height:100%; } 
body { position:absolute; height: 100%; overflow: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;} 

#header, #footer { 
    float: left; 
    width: 100%; 
    /*height: 100px;*/ 
    background-color: #808080; 
} 

#wrapper { 
    overflow: scroll; 
    height: 100%; 
    width: 999px; 
    margin: auto; 
}

// HTML代碼

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Satkar Travels</title> 
     <meta name="keywords" content="ltc, travel, Satkar Travels, lfc, Satkar Parivar, Satkar Holidays, Satkar Travels Gurgaon"> 
     <meta name="description" content="A Leader in LTC Travel."> 
     <meta name="author" content="Satkar Travels"> 

     <link rel="stylesheet" href="StyleSheet.css" type="text/css"> 

    </head> 
    <body> 

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

     <div id="wrapper"> 
      <div id="content"> 
       <section> 
        <p> 

        </p> 
       </section> 
       <section> 
        <p> 

        </p> 
       </section> 
       <p> 

       </p> 
      </div> 
     </div> 

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

    </body> 
</html>

請幫謝謝。

來源

2014-03-28 Deepak

嘗試用於'html'標籤去除'height'。並使'wrapper'高度等於'body'減去'header'和'footer'的高度。或刪除'header'和'footer' –

風馬牛不相及但考慮使用IE以外的東西。 –

使頁眉和頁腳到的位置是：固定的，然後給他們的高度。對於頭頂部做：0和頁腳讓您的底部：0 – noobcode

我會使用固定的位置，以對齊在所述頂部和底部的頁眉和頁腳。然後，只需將內容留在頁眉的下方即可。

HTML：

<header></header> 
<div id="mainContent"> 
    Lorem ipsum 
</div> 
<footer></footer>

CSS：

header { 
    height: 50px; 
    width: 100%; 
    background-color: #f00; 
    position: fixed; 
    top: 0; 
} 

footer { 
    height: 50px; 
    width: 100%; 
    background-color: #ff0; 
    position: fixed; 
    bottom: 0; 
} 

div#mainContent { 
    margin-top: 60px; 
}

小提琴演示：http://jsfiddle.net/w22dr/1/

來源

2014-03-28 08:27:52 Naoe

試試這個例子：

.header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color:red; 
} 

.container { 
    position: absolute; 
    top: 51px; 
    bottom: 51px; 
    left: 50%; 
    width: 900px; 
    margin-left: -450px; 
    overflow: auto; 
    background-color: blue; 
} 

.footer { 
    position: absolute; 
    bottom: 50px; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color:red; 
}

然後將此：

<div class="header"> </div> 
<div class="container"> </div> 
<div class="footer"> </div>

這裏是一個小提琴：http://jsfiddle.net/dxL7s/

這是你需要什麼？

來源

2014-03-28 08:21:11

感謝Kasipovic， – Deepak

歡迎您。 –

只需要在CSS改變。實施例：demo

或

應用此CSS：

html { height:100%; } 
body { position:absolute; height: 100%; overflow-x: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;} 

#header{ 
    float: left; 
    width: 100%; 
    /*height: 100px;*/ 
    background-color: #808080; 

} 
#footer { 
    width:100%; 
    position:fixed; 
    bottom:0; 
    left:0; 
    background:#808080; 
} 

#wrapper { 
    overflow: scroll; 
    height: 100%; 
    width: 999px; 
    margin: auto; 
}

來源

2014-03-28 08:29:48 Manoj

調整到瀏覽器窗口

回答

相關問題