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"**>，但当页脚消失时，容器流体仍然有12％的底部边距，我该如何解决这个问题？再次 - 我希望页脚仅在XS和SM设备上可见，但是容器应该没有底边距。有人可以帮我这个吗？

Answer 1

我不完全确定，您想要做什么，但如果您希望仅在xs和sm设备上显示某些内容，请使用.hidden-sm-up。

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

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

Answer 2

根据我对该问题的理解，您可以始终使用媒体查询删除特定视图端口的底部边距。

尝试并根据目的调整此代码：

//For smaller than md screens
@media screen and (max-width: 991px) {
  #foo {
    display: none;
  }
}

//For larger than sm screens
@media screen and (min-width: 991px) {
  #foo {
    margin: X;
  }
}

希望这有点帮助！

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

2 个答案: