适合浏览器窗口的高度

Question

I want to achieve the following layout with 100% height to browser. 我想实现以下布局，其中浏览器的高度为100％。

在此处输入图片说明

Only the content area should be scrollable, when required and footer should be display at the bottom of browser. 在需要时，仅内容区域应可滚动，并且页脚应显示在浏览器底部。

But after tried many times i got this one 但是经过多次尝试我得到了这个

在此处输入图片说明

by using following code. 通过使用以下代码。

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 code // 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>

please help Thank you. 请帮忙谢谢。

Answer 1

Try this example: 试试这个例子：

.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;
}

And then this: 然后这个：

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

Here is a fiddle: http://jsfiddle.net/dxL7s/ 这是一个小提琴： http : //jsfiddle.net/dxL7s/

Is this what you need? 这是您需要的吗？

Answer 2

Just need to change in CSS. 只需更改CSS。 Example: demo 示例：演示

or 要么

Apply this css: 应用此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;
}

Answer 3

I would use fixed position, to align the header and footer at the top and bottom. 我将使用固定位置，以使页眉和页脚在顶部和底部对齐。 Then just leave the content with a margin-top to keep it below the header. 然后，仅在内容顶部留一个空白，使它保持在标题下方。

HTML: HTML：

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

CSS: 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;
}

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

适合浏览器窗口的高度

问题描述

3 个解决方案

解决方案1
1 2014-03-28 08:21:11

解决方案2
1 2014-03-28 08:29:48

解决方案3
0 已采纳 2014-03-28 08:27:52

适合浏览器窗口的高度

问题描述

3 个解决方案

解决方案1 1 2014-03-28 08:21:11

解决方案2 1 2014-03-28 08:29:48

解决方案3 0 已采纳 2014-03-28 08:27:52

解决方案1
1 2014-03-28 08:21:11

解决方案2
1 2014-03-28 08:29:48

解决方案3
0 已采纳 2014-03-28 08:27:52