html - 根据屏幕尺寸设置容器高度 - bootstrap

Question

header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-color: #1f1f1f;
  height: 10%;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 10%;
  bottom: 12%;
  right: 0;
  left: 0;
  overflow-y: auto;
  background-color: #171717;
  padding-top: 5vh;
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1f1f1f;
  height: 12%;
}

<header>
  Some stuff
</header>
<div class="container-fluid body-content">
  Some more stuff
</div>
<footer class="col-md-visible-block">
  Some more other stuff
</footer>

我正在使用 Bootstrap ，我正在处理一个页面，该页面应该有一个 10% 的标题始终在顶部可见，包含实际内容所在的容器并且可以滚动浏览，还有一个页脚应该只在XS和 SM屏幕，所以我添加了 <footer **class="col-md-visible-block"**> ，但是当页脚消失时，container-fluid 仍然有 12% 的底部边距，我该如何解决这个问题？再次 - 我希望页脚仅在 XS 上可见和 SM设备，但容器应该没有底边距。有人可以帮我解决这个问题吗？

Answer 1

我不完全确定你想做什么，但如果你想让某些东西只在 xs 和 sm 设备上可见，请使用 .hidden-sm-up .

col-md-visible-block 有什么作用？它不是标准的 Bootstrap 类。它是使用 display: none 还是仅使用 visibility: hidden; 来隐藏元素？

在所有现代浏览器中，您还可以使用 calc()结合 vh 和 vw 单元的 CSS 函数。参见 http://caniuse.com/#feat=viewport-units