调整到浏览器窗口

的高度我要实现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

调整到浏览器窗口

回答

相关问题