Question

当用户向上调整浏览器大小时，我想让内容区域响应，我也希望页脚始终粘在底部。

问题：

** 1 - **当用户在其他分辨率下打开此屏幕时，页脚消失，内容区域松散了一些内容。

2 - 如果用户调整浏览器窗口的大小，则向上调整页脚消失和部分内容区域。

jsfiddle：https://jsfiddle.net/0bc868hf/1/

body {
  overflow-x: hidden;
  overflow: hidden;
}

.navbar-header {
  background: green;
}

.sidebar {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  width: 17%;
  height: 100%;
}

.content {
  border: 1px solid #ddd;
  min-height: 700px;
  background-color: #ffffff;
  overflow: scroll;
  overflow-x: hidden;
  margin-left: 178px;
}

.footer {
  border: 1px solid #ddd;
  min-height: 78px;
  margin-top: 10px;
  padding: 20px;
  background-color: #f6f9fb;
}

<div class="navbar-header">
  header
</div>
<nav class="sidebar">
  sidebar
</nav>

<div class="content">
  content
</div>

<div class="footer">
  footer
</div>

Answer 1

你想要这个吗？ See this fiddle

body {
  overflow-x: hidden;
  overflow: hidden;
  height: 100%; 
  min-height: 100%; 
}

html { 
  height: 100%; 
  min-height: 100%; 
}

.navbar-header {
  background: green;
}

.sidebar {
  background-color: #333;
  border-right: 1px solid #000;
  color: #fff;
  position: fixed;
  width: 178px;
  height: 100%;
}

.content {
  border: 1px solid #ddd;
  height: calc(100% - 150px);
  background-color: #ffffff;
  overflow: scroll;
  overflow-x: hidden;
  margin-left: 178px;
}

.footer {
  border: 1px solid #ddd;
  min-height: 78px;
  margin-top: 10px;
  padding: 20px;
  background-color: #f6f9fb;
  position: fixed; bottom: 0;
  width: calc(100% - 178px);
  left: 185px;
}

Answer 2

看看这个小提琴，我删除了正文上的overflow: hidden规则并更新了页脚类的规则。

https://jsfiddle.net/0bc868hf/4/

Answer 3

代表 .content ：

Icon.on(holderView).color(R.color.your_color).icon(R.mipmap.your_icon).put();

页脚

：

height: calc(100% - 150px);

CSS：当用户向上调整内容时，如何使内容和页脚粘贴响应

3 个答案: