html - 如何将div的背景图像高度设置为始终响应并且不提供滚动条?

标签 html css twitter-bootstrap

<分区>

我不希望 body 有背景图片。我想将它应用到我的主分区。如果我将图像高度设置为 100%,它会生成一个滚动条。如果我给它像素,它不会完全响应,并且在调整浏览器大小时会有白色部分。 我希望它完全适合所有屏幕尺寸但没有滚动条。

 <div class="another-div"></div>
 <div class="container-fluid main"></div>

 <style>
  .main{
  background-image: 
  url("templates/img/single/register_selector_background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  overflow: hidden;
  }
</style>

最佳答案

我不确定我是否理解你的问题,但我认为这就是你要找的东西

100% 只会根据元素中包含的内容调整大小。

使用vh会使用显示高度

html{
 overflow: hidden;
}
.main {
  background-image: url("https://baconmockup.com/300/250");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}
<div class="another-div">Some other content</div>
<div class="container-fluid main"></div>

<div class="other-div">Other Content that is hidden because the scroll bar is disabled on html</div>

关于html - 如何将div的背景图像高度设置为始终响应并且不提供滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47021564/

上一篇:css - 移动我的 css 消息框

下一篇:html - 中心表 ==> 宽度 :100%; margin: 0 auto;) not working

相关文章:

javascript - AngularJS 将 Bootstrap 按钮组值传递给 Controller

html - 使用 Bootstrap 3 如何隐藏表中的列?

javascript - 从引导选择下拉列表中隐藏默认选定的项目

javascript - 我可以自动提交文件上传吗?

jquery - 当高度增加时图像消失。为什么?

html - Bootstrap 3 站点上的自动调整标题大小

twitter-bootstrap - 如何为弹出框添加页脚并使内容可滚动?使用 Twitter Bootstrap 3

html - 在同一行显示 div 标签

javascript - 我想如果有 2 个元素具有相同的文本,一个在 jquery 中被删除

javascript - 粘性标题从顶部滑入固定位置