我有一個內容列和一個側欄。內容列有一個白色的bg,側邊欄有一個輕微的漸變bg圖像。內容列總是比側邊欄長,所以側欄圖像不會伸展到底部。我如何始終使用div垂直製作內容和側邊欄的高度?使用div獲得兩個相等高度的列的最簡單方法
-2
A
回答
0
雖然不是唯一的方式,做到這一點,我最喜歡的就是用「人造塔」絕招:http://www.alistapart.com/articles/fauxcolumns/
的基本思想是把在一個包裝的內容和在一個div漸變背景側邊欄。該包裝div保證與最長的DIV一樣大,因此您的漸變始終可見。
0
position: absolute
通常被認爲是不好的形式,但也可以使用下面的代碼來實現等高列:
HTML:
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat dignissim accumsan. Aenean nisl ipsum, dictum nec dignissim ac, dictum et lacus. Aenean ac sapien egestas lacus rutrum rutrum. Etiam sit amet libero ac arcu pellentesque bibendum. Nulla dignissim imperdiet nulla, ac dictum lorem feugiat id. Proin convallis tempus commodo. Ut vitae elit velit. Duis lacinia sollicitudin justo et vehicula. Duis sed velit vitae arcu tincidunt condimentum eu eget risus. Maecenas non urna nisi.
In ac lacinia dui. Donec lacinia, lacus fermentum ultrices iaculis, leo purus pretium velit, in rutrum est nisi sit amet mi. Curabitur nisl nunc, malesuada ac feugiat et, dignissim vel nisl. Proin ac erat in ipsum laoreet blandit nec nec tortor. Maecenas bibendum risus ac lorem pretium et dignissim lacus laoreet. Aenean suscipit porta leo ut commodo. Phasellus porttitor, nulla eget euismod pellentesque, enim sem consequat ipsum, quis interdum nunc mauris quis mauris. Proin orci est, convallis eu sodales vel, tempus a dolor. Mauris pretium faucibus tincidunt. In mauris arcu, laoreet sit amet ullamcorper sed, malesuada vel felis. Nam sollicitudin pellentesque sapien vel facilisis. Suspendisse risus dolor, tincidunt sit amet auctor nec, mollis ac nisi. Nunc sagittis libero non massa tincidunt at bibendum est pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Praesent ullamcorper, odio a euismod mattis, nisi arcu feugiat nisi, eu hendrerit diam augue eget diam. Nulla pellentesque sodales ante id tincidunt. Aliquam in purus vitae ante scelerisque tempor. Duis bibendum, nibh non accumsan pulvinar, lacus libero vestibulum sem, id lacinia erat nisi scelerisque mauris. Ut et tristique metus. Aenean ullamcorper vestibulum metus a laoreet. Vestibulum iaculis vestibulum elit, lobortis pharetra orci adipiscing sit amet. Integer vel molestie nulla. Morbi fringilla erat et nisi varius blandit. Pellentesque nunc ante, tempor vitae tincidunt et, rhoncus et urna.
</div>
<div id="sidebar">
sidebar
</div>
</div>
CSS:
#container
{
width: 500px;
position: relative;
}
#content
{
width: 65%;
background-color: #000;
color: #FFF;
}
#sidebar
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: #EEE;
width: 33%;
}
結合top: 0
和bottom: 0
導致元素伸展到極限(只要沒有聲明高度)。參見jsFiddle進行演示。
0
有很多不同的方法來實現這一點。我發現,正確的解決方案很大程度上取決於您的HTML架構。這就是說,如果你對HTML/CSS的使用很困難,那麼我絕望的解決方法是使用JS(本例中爲jQuery)。因爲這個原因,我不建議你在你的項目中包含jQuery。我只是提供一個我之前使用過的替代品。
var h1=$('#div1').height();
var h2=$('#div2').height();
if (h1>h2)
$('#div2').height(h1);
else
$('#div1').height(h2);
相關問題
- 1. 兩個div的高度相等
- 2. 高度相等的div(兩個欄)
- 3. 如何獲得兩個相等的列,一列包含3個相等的高度div「行」?
- 4. 不能得到兩個div的高度相等!
- 5. 使用flexbox獲得高度相等的行,而不是列
- 6. 獲取兩個數組的最簡單方法具有相同的長度?
- 7. 使兩個div的高度相同
- 8. OrderBy ThenBy - 獲取剩餘(相等)物品的最簡單方法?
- 9. 如何在兩個Bootstrap列上獲得相同的高度?
- 10. 檢查4個數字是否相等的最簡單方法?
- 11. 製作兩個DIV相同的高度
- 12. 如何增加兩個DIV的高度相等?
- 13. div集高度相等
- 14. jQuery的高度相等列
- 15. div divs最後一行的div divs高度相等
- 16. 使用css的等高高度div
- 17. 無法獲得div元素的高度
- 18. 不等於兩個Div的高度,只使用HTML&CSS
- 19. 事業部的高度等於另一個DIV最大高度
- 20. 最簡單的方法來總結兩個維度? (Python)
- 21. 最簡單的方法來形成兩個列表的聯合
- 22. 有沒有更簡單的方法來平等使用jQuery塊的高度?
- 23. 兩個div並排,相同的高度沒有設置高度
- 24. 無法獲得高度相等的列和可見的排水溝
- 25. 使用python驗證兩個CSV文件的最簡單方法
- 26. 如何使用jQuery設置兩個div的相同高度
- 27. 將div縮放到相等的高度,需要的最大高度
- 28. 獲得最高的三個整數,除非二者相等
- 29. 多列div與CSS的等列高度
- 30. 獲得前x個字符的最簡單方法是什麼?
這已經被問了很多次之前。請提出一個新的問題之前搜索。 – drudge 2011-01-19 19:54:09