Question

我的标题位于顶部。

我的页脚固定在僵尸上。

没有什么可以滚动的。

#content在中间左侧空间的100％高度怎么可能？

body{overflow-y:hidden;}

footer {
    position: fixed;
    height: 50px;
    bottom: 0;
    width: 100%;
}

header{
    background-color:yellow;
}

section#content{
    background-color:green;
    height:100%
}

<header>
    Header
</header>
<section id="content">
    Content
</section>
<footer>
    Footer
</footer>

Answer 1

您的问题是html和body不是100％的高度，said correctly in the comments也是如此。

将height: 100%添加到html和body会使其正常工作

html,
body {
  height: 100%;
}

＆＃13;

html,
body {
  height: 100%;
  overflow-y: hidden;
}

footer {
  position: fixed;
  height: 50px;
  bottom: 0;
  width: 100%;
  background-color: lightblue;
}

header {
  background-color: yellow;
}

section#content {
  background-color: green;
  height: 100%
}

＆＃13;

<header>
  Header
</header>
<section id="content">
  Content
</section>
<footer>
  Footer
</footer>

＆＃13;

Answer 2

我想你想要这样。检查代码段

var winHeight = $(window).height();
var headHeight = $('header').height();
var footHeight = $('header').height();
 var headFoot =headHeight+footHeight

$("#content").css("height",winHeight -headFoot);

body{overflow-y:hidden; margin:0px;}

footer {
    position: fixed;
    height: 50px;
    bottom: 0;
    width: 100%;
    background:red;
}

header{
    background-color:yellow;
     width: 100%;
}

section#content{
    background-color:green;
    height:100%;
    overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
    Header
</header>
<section id="content">
    Content
</section>
<footer>
    Footer
</footer>

容器100％高度

2 个答案: