Question

我在Django上创建了这个网站，并且在很多元素的维度上遇到了麻烦。在所有页面上，我有一个左右边距，跨越col-sm-1，背景为：黑色。

在style.css中，我搜索了一些解决方案，但没有任何问题可以100％解决问题。如果我使用高度：100％，它会在每个边缘的顶部显示一块黑色的骨板。我不想放置精确像素，因为我觉得相对大小会使网站更容易跨平台查看。如果我把高度：100vh，它覆盖了我想要的高度，但它没有在带有滚动条的长页面上正确覆盖并留下很多空白区域。

如何使div的背景颜色/大小扩展整个页面（可滚动或不滚动），而不扩展其边界？是否还有一种方法可以对图像进行此操作以使其可以伸展？我尝试了背景大小：覆盖图像，但它扩展了col-sm-1边界，并没有覆盖滚动的较长页面的底部。

html：

<body>
<div class="container-fluid">
  <div class="col-sm-1 col-xs-1 leftright-margins">
  </div>

<!--Main section-->
  <div class="col-sm-10 col-xs-10" id="main_section">
    {% block navbar %}
      {% navbar %}
    {% endblock %}
    {% block body %}
    {% endblock %}
  </div>

  <div class="col-sm-1 col-xs-1 leftright-margins">
  </div>
</div>

的CSS：

.leftright-margins {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100vh;
  height: auto;

}

现在它可以用于单个页面，但是我有一些页面可以显示一个跨越高度的表格。在初始屏幕之后，如果我向下滚动，则两侧是空白。

编辑：

我发现图像似乎重叠，因为我没有设置主要部分容器的最小高度。我仍然无法调整img / background div的高度，因此它覆盖了滚动页面的整个大小。

EDIT2：

使用javascript找到一个简单的解决方案。我想我的问题太复杂了。

 $(document).ready(function(){
  var dynamic = $(document).height();
  var static = $('.leftright-margins');
  static.css({
    'min-height': dynamic,
    'max-height': dynamic,
  });
});

Answer 1

尝试在＆lt;上设置边距。身体＆gt;标签，而不是简单的＆lt; div>其中的isions。这应该适用于整个文档。如果这不起作用，请尝试调整＆lt; html＆gt;元件。我确信，有经验的人会纠正我，但使用这两个标签可以帮助更大的文件。

Answer 2

Body，container-fluid {margin：0; padding：0;}在bootstrap中有默认的填充和边距使用，可能是这个原因问题而不是空格，你使用背景颜色黑色的身体副诗，我如果你能

，请尝试分享形象

你如何使用css / html正确地适应背景/ imgs？

2 个答案: