如何將元素垂直拉伸，使其至少與其兄弟一樣高？

對於某些上下文，我試圖完成的是我想要一個始終延伸到頁面底部的側欄。其內容的高度不固定，頁面上主要內容的高度也不固定。因此，基本上有三種不同的可能性：如何將元素垂直拉伸，使其至少與其兄弟一樣高？

主內容和側邊欄的內容都不足以達到視口的底部。無論如何，側欄伸展到底部。
主要內容比視口和邊欄的內容都長。側欄向下延伸，以便與主要內容一樣長。
側邊欄內容比視口和主要內容長。該頁面已經擴展得足夠多，您可以看到側邊欄的全部內容。

如果頁面比視口長，應該只有一個滾動條，用戶將使用它同時滾動主內容和側邊欄。他們不能單獨滾動。

我的想法是給側邊欄樣式「最小高度：100％」。如果邊欄填充包含元素的高度的100％，並且包含元素接觸頁面的底部，則邊欄將拉伸到頁面的底部。最小高度意味着它應該能夠擴大頁面的大小，如果它自己的內容恰好超過了這個高度。

您可能已經發現這不起作用。這裏有一個演示：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，其所有祖先需要有風格「的高度：100％;」。在我添加這個樣式之前，我的容器div的高度是1000px，這是它最高的孩子的高度，我的主要內容div。一旦我增加了身高：100％;對於所有的祖先元素，容器div的「高度」屬性被截斷到視口的高度。因此，而不是擴展邊欄div來填充整個頁面，它只會填充視口。向下滾動，您會看到側欄div不夠長。

如何縮短側邊欄以擴展到主內容div的大小？沒有使用Javascript可能嗎？

如果這個特定的實現是不可能的，我想聽聽其他可能的解決方案。我只是想我會先問一個有重點的問題。

來源

2014-12-10 robboots

這裏只使用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;雖然我不會感到驚訝，如果有一個更適合的display：table-cell方法。

來源

2014-12-10 23:26:11

設置高度父DIV和overflow：auto更改DIV應該是自動調整大小

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

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

來源

2014-12-10 23:28:30

如何將元素垂直拉伸，使其至少與其兄弟一樣高？

回答

相關問題