Question

在我的定位移动设备的应用中（使用cordova，但这无关紧要）我想显示一个滚动的div填充页面，除了顶部和底部导航栏： jsfiddle example

据我所知，我需要指定div的高度，以便div滚动。（css中的第30行 - 目前已注释掉）：

#long {

background: -webkit-linear-gradient(red, blue);
width: 90%;

/* scroll */
overflow-y: scroll;
/* for the navbar */
margin-top: 48px;
float: left;
/* to make the scroll work */
/*height: 347px;*/
-webkit-overflow-scrolling: touch;

}

我真的更愿意，如果我不得不这样做，因为使用离散间隔进行媒体查询将总是冒一些模糊大小的手机风险，以获得比预期更宽的底部边距。

可能限制潜在解决方案的其他要求： - 应用程序有几个“页面”，这些页面在不需要时从视口向左或向右移出，但不从文档中删除。

任何想法如何解决这个问题？最好只使用CSS。

Answer 1

如果页面符合视口尺寸，我会创建一个带有一些填充的包装器来绝对定位导航栏，然后使内部容器滚动。这将始终适合视口高度，因此不需要固定的高度。

html,
body {
  height: 100%;
  overflow: hidden;
}

.wrapper {
  height: 100%;
  padding-top: 48px; // Allow space for navbar
}

.inner {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar {
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

HTML看起来像：

<div class="wrapper">
  <div class="navbar"></div>
  <div class="inner"></div>
</div>

Demo

溢出滚动而不指定高度？

1 个答案: