Question

对于某些情况，我想要完成的是我想要一个始终延伸到页面底部的侧边栏。其内容的高度不固定，页面上主要内容的高度也不固定。因此，基本上有三种不同的可能性：

主要内容和侧边栏的内容都不足以到达视口的底部。无论如何，侧边栏都向下伸展到底部。
主要内容比视口和侧边栏的内容都要长。侧边栏向下延伸，使其与主要内容一样长。
侧边栏内容比视口和主要内容长。页面扩展得足够远，您可以看到侧边栏的全部内容。

如果页面比视口长，则应该只有一个滚动条，用户将使用它同时滚动主要内容和侧边栏。它们无法单独滚动。

我的想法是给侧栏“min-height：100％”。如果侧边栏填充100％的包含元素高度，并且包含元素触及页面底部，则侧边栏将延伸到页面底部。 min-height意味着如果页面的内容恰好超过了这个高度，它应该能够扩展页面的大小。

您可能已经发现这不起作用。这是一个演示：http://jsfiddle.net/ygLqtogt/

HTML：

<body>
    <div class="container-div">
        <div class="tall-div"></div>
        <div class="at-least-as-tall-div"></div>
        <div style="clear:both;"></div>
    </div>
</body>

CSS：

    html {
    height:100%;
}
body {
    height:100%;
}
.container-div {
    height:100%;
}
.tall-div {
    height:1000px;
    float:left;
    width:100px;
    background-color:blue;
}
.at-least-as-tall-div {
    min-height:100%;
    float:left;
    width:100px;
    background-color:red;
}

为了在我的侧边栏div上使用min-height，它的所有祖先都需要具有“height：100％;”的样式。在我添加这个样式之前，我的容器div的高度是1000px，这是它最高的孩子的高度，我的主要内容div。一旦我加了高度：100％;对于所有祖先元素，容器div的“height”属性被截断为视口的高度。因此，代替侧边栏div扩展以填充整个页面，它将仅填充视口。向下滚动，您会看到侧边栏div不够长。

如果侧边栏缩短，我如何让侧边栏扩展到主内容div的大小？是否可以不使用Javascript？

如果无法实现这一具体实施，我想了解其他可能的解决方案。我以为我会先问一个有针对性的问题。

Answer 1

这是使用css的一个技巧：

.container-div {
    height:100%;
    overflow:hidden;
}
.tall-div {
    height:1000px;
    float:left;
    width:100px;
    background-color:blue;
}
.at-least-as-tall-div {
    min-height:100%;
    float:left;
    width:100px;
    background-color:red;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}

检查小提琴： http://jsfiddle.net/qa5vu04e/

请注意，容器有overflow:hidden而不高的div有padding-bottom:10000px; margin-bottom:-10000px;但是如果有一个显示：table-cell方法更合适，我不会感到惊讶。

Answer 2

将高度设置为父div和overflow：auto to div应该是自动调整大小的

http://jsfiddle.net/ygLqtogt/1/

.container-div {
    height:1000px;
}
.tall-div {
    height:100%;
    ....
}
.at-least-as-tall-div {
    overflow:auto;
    ....
}

如何将元素垂直拉伸，使其始终至少与其兄弟一样高？

2 个答案: