为动态高度的div内的div分配100％的高度

-3

我试图将div的高度设置为其父项的100％。为动态高度的div内的div分配100％的高度

在离队看起来不错，但向下滚动，当你发现它是只一样高的浏览器窗口。它应该有它的父母的全部高度。

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

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

我的代码，因为它是现在：

#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和车身高度自动，其高度将是浏览器窗口的高度，作为框架规定。这会打破内容div的设计，如果右侧有很多搜索结果div，它应该高于浏览器。

我可能可以使用这个高度和一个固定的位置来工作，但是我期望能够顺利地滚动搜索div的内容，所以重要的是左侧的搜索带具有完整的高度内容（约在这种情况下2000像素）

来源

2016-07-27 Martin Hoffmann

尝试改变：

html, body{ height: 100%;}

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

并添加以下代码：

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

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

来源

2016-07-27 14:37:24

谢谢，但这样的HTML和车身高度将是624px，这是高度搜索列，如果它不应该被认为是全高，并且搜索列不会伸展到内容div的全部高度（它是父级） –

为动态高度的div内的div分配100％的高度

回答

相关问题