在响应式设计上将div的高度设置为页面的其余部分

Question

在我的响应式设计上，我想要一个页脚粘贴到底部，内容填满页面的其余部分。 http://jsfiddle.net/rzjfhggu/1/

在这个例子中，标题总是70px高度，但内容和页脚是响应的，所以我不能知道它们的高度。 我尝试用底部绝对制作页脚：0并且内容也是绝对的顶部70px和底部0，但在小型设备上，页脚会在内容之上并隐藏它。

＆＃13;

＆＃13;

<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

＆＃13;

tac

＆＃13;

＆＃13;

＆＃13;

还有什么想法吗？ 感谢。

Answer 1

这是我在jsfiddle中更新的代码： http://jsfiddle.net/rzjfhggu/2/

<强> HTML

＆＃13;

＆＃13;

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.header {
  height: 70px;
  background: orange;
  width: 100%;
}
.footer {
  background: lightblue;
  bottom: 0;
  position: fixed;
  height: 30px;
  width: 100%;
}
.content {
  background: yellow;
  position: absolute;
  top: 70px;
  bottom: 30px;
  left: 0;
  right: 0;
}

＆＃13;

<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不知道页脚的大小（正如您在问题中所述），代码将动态计算页脚高度，然后相应地设置内容高度

＆＃13;

＆＃13;

var pageheight = $(window).height();
var restheight = $('.header').height() + $('.footer').height();
$('.content').height(pageheight - restheight);

＆＃13;

 body
 {
  padding:0;
  margin:0;
 }

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}
.header {
  height: 70px;
  background: orange;
}
.footer {
  background: lightblue;
  position: fixed;
  bottom: 0;
}
.content {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有很多选择，我们来讨论一个： 为此，我假设你是决定你的页脚和标题项目大小的人，这意味着你知道它们的大小。

稍微更改一下你的html：

<强> HTML

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.content {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 70px 0 70px 0;
}
.inner_content {
  position: relative;
  height: 100%;
  width: 100%;
}

<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="inner_content">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

您更改的内容是内容元素的顶部和底部填充，顶部填充应与标题高度相同，底部填充应与页脚高度相同。如果正确呈现大小，您现在还可以向inner_content添加一些内容，这些内容可以滚动，但不会被页眉或页脚遮挡。

Answer 4

position:fixed可以帮助您，但如果您的内容很长，那么内容将向下滚动，并在最后一个页脚节目中显示，例如show jsfiddle demo。 DEMO

.content {
    height: 10px
}
.header{
    height: 70px;
    background: orange;
}
.content{
    background: yellow;
    height:100%;
}
.footer {
    background: lightblue;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

<div class="wrapper">
    <div class="header">
        HEADER
    </div>
    <div class="content">
        CONTENT
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
       
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>