用CSS在HTML中設置div的高度

我正在嘗試佈置一個帶有兩列的表格頁面。我希望最右邊的列停靠在頁面的右側，並且此列應具有不同的背景顏色。右側的內容幾乎總是比左側的內容小。我希望右邊的div永遠足夠高，可以到達它下面一行的分隔符。如何讓我的背景顏色填充該空間？用CSS在HTML中設置div的高度

.rightfloat { 
 
    color: red; 
 
    background-color: #BBBBBB; 
 
    float: right; 
 
    width: 200px; 
 
} 
 

 
.left { 
 
    font-size: 20pt; 
 
} 
 

 
.separator { 
 
    clear: both; 
 
    width: 100%; 
 
    border-top: 1px solid black; 
 
}

<div class="separator"> 
 
    <div class="rightfloat"> 
 
    Some really short content. 
 
    </div> 
 
    <div class="left"> 
 
    Some really really really really really really 
 
    really really really really big content 
 
    </div> 
 
</div> 
 
<div class="separator"> 
 
    <div class="rightfloat"> 
 
    Some more short content. 
 
    </div> 
 
    <div class="left"> 
 
    Some really really really really really really 
 
    really really really really big content 
 
    </div> 
 
</div>

編輯：我同意，這個例子非常類似表格與實際表格將是一個不錯的選擇。但是，我的「真實」頁面最終不會像桌面一樣，我只想先掌握這個任務！

而且，由於某些原因，當我創建/編輯我的帖子在IE7中，代碼顯示正確的預覽視圖，但是當我真的發表了消息，格式被刪除。在Firefox 2中編輯我的帖子似乎奏效了，FWIW。

另一種編輯：是的，我沒有接受GateKiller的答案。它確實在我的簡單頁面上很好地工作，但不在我實際較重的頁面中。我會調查你們都指向我的一些鏈接。

來源

2008-08-07 Chris Farmer

恩...

簡短的回答你的問題是，你必須100％的高度設置爲身體和HTML標記，然後將高度設置爲100％每個div元素你想使頁面的高度達到100％。

實際上，100％的高度在大多數設計情況下都不起作用 - 這可能很短，但這不是一個好的答案。谷歌「任何列最長」的佈局。最好的方法是將左邊和右邊的cols放入一個包裝物div中，漂浮左邊和右邊的cols，然後浮動包裝 - 這會使其延伸到內部容器的高度 - 然後在外部包裝上設置背景圖像。但要注意浮動元素的任何水平邊距，以防萬一您獲得IE「雙重邊距浮動錯誤」。

來源

2008-08-07 18:24:16 Polsonby

好的，謝謝你polsonby。 – 2014-09-15 06:55:02

我的網站上有同樣的問題（shameless plug）。

我有導航節「浮動：權利」和頁面的主體有大約250像素的背景圖像跨越右對齊和「重複-Y」。然後，我添加了「明確：兩個」的東西。這裏是W3Schools和CSS clear property。

我把清除放在「頁面」分類div的底部。我的頁面源代碼看起來像這樣。

body 
-> header (big blue banner) 
-> headerNav (green bar at the top) 
-> breadcrumbs (invisible at the moment) 
-> page 
    -> navigation (floats to the right) 
    -> content (main content) 
     -> clear (the quote at the bottom) 
     -> footerNav (the green bar at the bottom) 
    -> clear (empty but still does something) 
-> footer (blue thing at the bottom)

我希望幫助:)

來源

2008-08-07 17:07:05 Teifion

只是想幫助在這裏使代碼更易讀。
請記住，您可以通過點擊頂部的按鈕「101010」插入代碼片段。只需輸入您的代碼，然後突出顯示它，然後單擊按鈕。

下面是一個例子：

<html> 
    <body> 
    <style type="text/css"> 
     .rightfloat { 
      color: red; 
      background-color: #BBBBBB; 
      float: right; 
      width: 200px; 
     } 

     .left { 
      font-size: 20pt; 
     } 

     .separator { 
      clear: both; 
      width: 100%; 
      border-top: 1px solid black; 
     } 
    </style>

來源

2008-08-07 17:13:35

這給一試：

html, body, 
 
#left, #right { 
 
    height: 100% 
 
} 
 

 
#left { 
 
    float: left; 
 
    width: 25%; 
 
} 
 
#right { 
 
    width: 75%; 
 
}

<html> 
 
    <body> 
 
    <div id="left"> 
 
     Content 
 
    </div> 
 
    <div id="right"> 
 
     Content 
 
    </div> 
 
    </body> 
 
</html>

來源

2008-08-07 17:33:14 GateKiller

這裏的等高列的一個例子 - Equal Height Columns - revisited

你可以也檢查出我「人造列」以及DEA的 - Faux Columns

不要去表路線。如果它不是表格數據，請不要這樣對待。這對可訪問性和靈活性不利。

來源

2008-08-07 17:39:22

您的問題的簡短答案是，您必須將身高和html標記設置爲100％，然後將每個div元素的高度設置爲100％，以使頁面高度達到100％。

來源

2008-08-07 17:47:58 GateKiller

A 2列布局是一點點很難獲得在CSS工作（至少直到CSS3是可行的。）

浮左右將工作到一個點，但它不會讓你延長的背景。爲了使背景保持穩定，您必須實施一種稱爲「虛擬列」的技術，這基本上意味着您的列本身不會有背景圖像。您的2列將包含在父標籤內。這個父標籤被賦予一個包含你想要的2列顏色的背景圖片。使這個背景只有你需要的大（如果它是一個純色，只能使它高1個像素），並讓它重複-y。 AListApart有一個很好的演練，說明如何使它工作。

http://www.alistapart.com/articles/fauxcolumns/

來源

2008-08-07 18:21:51

我能想到的2個選項

使用JavaScript來調整在頁面加載小柱。
假的高度相等的用repeat-y

來源

2008-08-08 03:35:30 Ricky

容器<div/>代替（<div class="separator"/>）上設置background-color的專欄中，我放棄了嚴格的CSS和使用一個小的jQuery：

var leftcol = $("#leftcolumn"); 
var rightcol = $("#rightcolumn"); 
var leftcol_height = leftcol.height(); 
var rightcol_height = rightcol.height(); 

if (leftcol_height > rightcol_height) 
    rightcol.height(leftcol_height); 
else 
    leftcol.height(rightcol_height);

來源

2009-06-22 23:18:16 mxmissile

一些瀏覽器支持CSS表格，因此您可以使用各種CSS display: table-*值創建此類佈局。本文中有更多關於CSS表格的信息（和同名書籍）由Rachel Andrew編寫：Everything You Know About CSS is Wrong

如果在不支持CSS表格的舊瀏覽器中需要一致的佈局，則需要做兩件事情：

使您的「表格行」元素清除其內部浮動元素。

這樣做的最簡單的方法是設置overflow: hidden這需要大多數瀏覽器的關懷和zoom: 1觸發舊版本IE的hasLayout財產。

有很多其他方法清除浮游物，如果這種方法導致不良的副作用，你應該檢查which method of 'clearfix' is best和文章on having layout其他方法。
平衡兩個「表格單元」元素的高度。

有兩種方法可以解決這個問題。您可以通過在「表格行」元素（faux columns technique）上設置背景圖像來創建相等高度的外觀，或者可以通過給每個大小的填充和同樣大的負邊距來使列的高度匹配。

仿柱是更簡單的方法，並且當一列或兩列的寬度固定時工作得非常好。另一種技術科佩斯與可變寬度列更好（根據百分比或em單位），但如果你直接在列內鏈接內容可能會導致某些瀏覽器的問題（例如，如果一列載<div id="foo"></div>和你鏈接到#foo）

下面是使用填充/邊距技術來平衡列高度的示例。 Equal Height Columns and other tricks（這也是我第一次瞭解了保證金/填充：

html, body { 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    zoom: 1;   /* Clear internal floats in IE */ 
 
    overflow: hidden; /* Clear internal floats */ 
 
} 
 

 
.right-column, 
 
.left-column { 
 
    padding-bottom: 1000em; /* Balance the heights of the columns */ 
 
    margin-bottom: -1000em; /*         */ 
 
} 
 

 
.right-column { 
 
    width: 20%; 
 
    float: right; 
 
} 
 

 
.left-column { 
 
    width: 79%; 
 
    float: left; 
 
}

<div class="row"> 
 
    <div class="right-column">Right column content</div> 
 
    <div class="left-column">Left column content</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="right-column">Right column content</div> 
 
    <div class="left-column">Left column content</div> 
 
</div>

搞清楚如何添加額外的列和漂亮的間距和邊距時，這Barcamp演示由娜塔莉·道恩也可能是有用的技巧來平衡列高度）

來源

2009-06-23 00:09:29 georgebrock

爲我工作。謝謝:) – 2012-03-13 02:27:30

只需使用css屬性width即可。

下面是一個例子：

<style type="text/css">; 
    td { 
     width:25%; 
     height:100%; 
     float:left; 
    } 
</style>

來源

2013-03-24 14:48:12 user2194160

歡迎來到堆棧溢出！感謝您的發佈！請勿在您的帖子中使用簽名/標語。您的用戶箱計爲您的簽名，您可以使用您的個人資料發佈任何有關您自己的信息。 [關於簽名/標語的常見問題]（http://stackoverflow.com/faq#signatures） – 2013-03-25 08:42:15

這應該爲你工作：將高度設置爲100％，在你的CSS爲html和body元素。然後您可以在div中根據您的需要調整高度。

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 
div { 
    height: 100%; /* Set Div Height */ 
}

來源

2013-08-29 07:55:46

無需編寫自己的CSS，有通過調用你的HTML頭部分，我們可以實現很多花式稱爲「引導CSS」的圖書館，這裏有一個例子：如果你想提供兩個在一排列，你可以簡單地做到以下幾點：

<div class="row"> 
    <div class="col-md-6"></div> 
    <div class="col-md-6"></div> 
</div>

這裏MD代表介質裝置,,你可以使用COL-SM-6爲超小型設備

更小的設備和col-XS-6

來源

2017-06-23 10:01:07

用CSS在HTML中設置div的高度

回答

相關問題