Question

我正在尝试将页面的内容区域拉伸到100％。我有一个固定的标题（50px高度）和一个粘性页脚（95px高度），其间的任何东西都应该使用100％的高度...但是我不能让它工作。这是我的CSS

<div id="wrap">
    <!-- fixed top navigation -->
    <div id="main">
        <!-- main content -->
    </div>
</div>
<footer>
    <!-- footer -->
</footer>

CSS就像这样

html, body {
height: 100%; /* needed for container min-height */
}

#wrap {min-height: 100%;}

#main {
  position:relative; /* needed for footer positioning*/
  overflow:auto;
  padding-bottom: 95px; /* must be same height as the footer */
  padding-top:50px;
  min-height:100%;
}  

footer {
  position: relative;
  margin-top: -95px; /* negative value of footer height */
  height: 95px;
  background-color:#ebebeb;
}

body {margin:0px;padding:0px;}

任何想法如何做到这一点？

Answer 1

如果您将页脚相对推出（“粘性”），则意味着您希望网站向下滚动内容。

所以你需要创建另一个div（“block”） - ＆gt;在HTML位置页眉和页脚之间的div，给它一个100％的宽度和一个auto的高度; （意思是：div将填充其中放入的内容量。

Answer 2

你可以使页脚像

footer{
        position: absolute;
        border: 3px solid #eee;
        height: 30px;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
    }

Answer 3

我以前尝试了很多尝试使用javascript设置高度100％

或尝试使用frameset

<强>更新

这篇文章用于使用css http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/ 但我确信90％可能会遇到不同浏览器的问题，但是尝试一下。

和本文使用jQuery http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

这用于使用框架集 http://www.echoecho.com/htmlframes08.htm 和 http://www.w3schools.com/html/html_frames.asp

最后，您将选择对您的项目有用的内容祝你好运

我的问候

Answer 4

最简单的方法是

html,body{
 height:100%;
}
#wrap {
 height: calc(100%-50px-95px); 
}
.footer {
 //your code here
 height: 95px;
}

CSS内容区域高度100％

4 个答案: