Question

我试图将div的高度设置为其父亲的100％。

左边的乐队看起来不错，但是向下滚动时你会注意到它只有浏览器窗口一样高。它应该具有它父母的全高。

内容div似乎也有同样的问题，如果你向下滚动，你可以通过背景图像来判断。为了解决这个问题，我可以删除内容div的height: 100%属性，但在这种情况下，左边的条带也会停止工作，因为给它100％的高度需要父div定义一个高度。

我注意到我正在使用的Zurb基础框架将body和html的高度设置为100％，所以我将此属性覆盖为html，body height = auto，因为我认为这可能会解决问题。当我从我的内容div中删除height = 100％属性时，它会正确缩放，右边的所有结果项都具有正确的高度。但在这种情况下，我无法为左侧的搜索div指定100％的高度。我该如何解决这个问题？

我现在的代码：

#search-column {
  float: left;
  margin-left: 6%;
  margin-right: 6%;
  width: 24%;
  background-color: rgba(255, 255, 255, .85);
  height: 100% !important;
}
#content {
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding-bottom: 20px;
  height: auto;
}
html,
body {
  height: auto;
}

如果我从html和body中删除auto auto，它们的高度将是框架中指定的浏览器窗口的高度。这将打破内容div的设计，如果右边有很多搜索结果div，它应该高于浏览器。

我可能会使用这个高度和固定位置，但是我希望以后能够平滑地滚动搜索div的内容，所以左边的搜索带有完整的高度是很重要的内容（在这种情况下大约2000 px）

Answer 1

尝试改变：

html, body{ height: 100%;}

它会强制页面使用所有可能的高度

并添加此代码：

#search-column{
    min-height: 100%;
    max-height:100%;
}

它将强制使用该div只有100％的高度

为具有动态高度

1 个答案: