Question

如果这是一个微不足道的问题，我道歉，但我似乎无法弄明白。我有this website，我需要侧面的导航栏，右边的矩形（带有“ContentExtender”类的那个）可以向下延伸到物理页面的底部（好吧， ContentExtender只需要延伸到内容，所以它混合，但这是另一个故事）。最简单的方法是什么？我查了一下，发现将Body的高度设置为100％应该有效，但事实并非如此。我知道要查看的代码很多，所以这里是代码的实际重要部分（任何前缀为“cc”的东西只是一种简单的方法来评论它们）：

.ContentExtender {
    background-image: url(bgblack.png);
    min-height: 10px;
    ccmin-width: 200px;
    ccwidth:100%;
    margin: 0px 0px 0px 1010px;
    position: absolute;
    top: 110px;
    right: 0px;
    left: 0px;
}
.MainParent {
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom: 0px;
    background-color:rgba(70,70,70,.7);
    min-height: 600px;
    min-width: 1000px;
    max-width: 1000px;
    height: 100%;
    margin: 0px 10px 0px 10px;
    z-index:100;
    overflow: hidden;
}

Answer 1

你需要给html，身体{身高：100％;加上你想要拥有的元素的任何其他父母height: 100%;，height: 100%;

Answer 2

我最近有一个问题，我无法延伸到窗口的顶部，这可能是类似的。我设置：

body {
  margin: 0px;
}

在您的情况下，它可能是另一个元素。我已经看到所有可能的元素被故意设置为0边距，然后重新实现所需的边距。

Answer 3

似乎代码中有一个小错误，请尝试编辑

.ContentExtender

并将其更改为

#ContentExtender

然后您将能够修复它，如果此方法不起作用，请尝试在内容扩展器的HTML标记上设置背景CSS，如下所示

html{
height:100%;    
background:#ccc url(bgblack.png);

}

以上是一个例子，所以请即兴发挥

Answer 4

您的问题与儿童div无法直接决定父母行为的事实有关。

在父div上尝试其中一项：

overflow: auto;

display: table;

或者在孩子div中：

display: table-row;

尝试时，请尝试省略“height：blabla”属性。

解决了类似的问题：[1]：CSS - Expand float child DIV height to parent's height

DIV不会一直延伸到页面底部？

4 个答案: