HTML/CSS設置div來兄弟

的高度我已經包含在第三2分div的。其中一個被包含的div向左漂移，另一個向右漂移。我希望2兄弟div始終保持在同一個高度，但是我有這個問題。到目前爲止，我只在Firefox瀏覽頁面，並且認爲在使用至少一個瀏覽器工作後，我會擔心任何跨瀏覽器問題。HTML/CSS設置div來兄弟

下面是標記：

<div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
     ... 
    </div> 
    <div id="right-div" class="border"> 
     ... 
    </div> 
</div>

這裏是CSS：

#main-container  { position: relative;        min-height: 500px; } 
    #left-div  { position: relative; float: left; width: 700px; min-height: inherit; } 
    #right-div  { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; } 

.clearfix:after  { content: " "; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix   { display: inline-block; _height: 1%; clear: both; } 
.clearfix   { display: block; clear: both; } 
.border    { border: solid 1px #000; }

如果#left-div含量大於500px長，#right-div不擴大相匹配。在我試過的一個例子中，Firefox表示#main-container的計算樣式高度爲804px，#left-div的計算樣式高度爲800px，#right-div的計算樣式高度爲586.2px，因爲它已擴展以適合自己的內容。

我明白我可能要對這個錯誤的方式，如果這是一個重複的問題，那麼我很抱歉，但我不能肯定什麼搜索下。

來源

2010-04-26 Paul Woolcock

有人說了''

？ – 2010-04-26 17:11:09

Pure css，no。但是，根據Pekka的建議，您可以使用'table'，或者如果您不介意使用它，則使用Javascript。 – 2010-04-26 17:18:11

表格佈局？ *不寒而慄* – 2010-04-26 17:18:17

回答

我可以機架我的大腦所有我想要的，但我認爲這真的可以只用表的行爲，即使用<table>小號解決，（如果你需要IE6 and IE7 compatible）或display: table/table-row/table-cell（這實際上是同樣的事情，但贏得了」在同伴面前讓你難堪，因爲桌子是邪惡的;）。

我會去的表。

隨意證明我錯了，並張貼一個健全的CSS的解決方案，我會很高興！

來源

2010-04-26 17:15:16

IE7也出來了，用「display：table」 – tom 2010-04-26 17:22:02

@tom youre right，cheers。編輯。 – 2010-04-26 17:33:23

我真的結束了與JavaScript解決方案......該頁面已經加載jquery，所以它是微不足道的添加代碼來調整div高度......謝謝！ – 2010-04-28 13:57:38

我認爲你有以下選擇：

人造列 - 使用的div容器重複的背景圖像創建等高
的外觀使用表
使用JavaScript來調整DIV高度
使用JavaScript來對CSS的支持添加到非兼容的瀏覽器

來源

2010-04-26 17:19:07 tom

我用人造色譜柱： http://matthewjamestaylor.com/blog/equal-columns-cross-browser-css-no-hacks – 2010-05-28 15:03:07

爲了要用HTML和CSS來使用div，你需要使用JavaScript來檢查它們的高度，然後改變它來匹配。

如果你不想使用JavaScript，和你的網站有一個特別的設計，在你的第三個格，你可以給它一個重複-Y背景圖像，將擴大爲兩個div的人做。例如，假設你的兩個div有一個藍色背景，而你的第三個div有一個灰色背景。刪除藍色背景並使用藍色和灰色創建可重複的圖像，並將該圖像放置在第三個div上。這樣，隨着它的擴展，它會出現兩個div。

來源

2010-04-26 17:20:29 Braxo

這將允許右div的高度始終是左側爲左的增長動態基於內容，但正確的永遠不會比最小高度較大，如果左邊有更少的內容，這可能是你可以接受的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Matching Size Divs</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style> 
    #main-container { position:relative; min-height:500px; }  
    #left-div { width:700px; min-height:500px; }  
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }  
</style> 
</head> 
<body> 
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
     ... 
    </div> 
    <div id="right-div" class="border"> 
     ... 
    </div> 
</div> 
</body> 
</html>

來源

2010-04-26 17:47:13 David

我認爲這是可以通過同時指定的div（即左格&右格）高度爲100％實現。這樣，如果沒有爲html/css指定容器div的高度，那麼它們將佔用容器div的高度&，那麼容器div也會展開以適應其子元素。我知道它很晚，但它可能會爲你節省劇本。

來源

2011-02-18 22:22:16

也這麼認爲，但這在我的情況下不起作用。似乎100％沒有成功計算出父母的身高。 – 2017-08-20 09:06:45

即使現在這麼多年後你的評論是正確的，％高度不會計算。當你認爲它會有用時會感到羞愧。 – Chris 2017-10-15 09:35:51

，如果沒有足夠的空間，他們會疊加。確保包含這兩個div的寬度足以讓它們兩者都...如果你刪除它們的寬度進行測試，我敢打賭它會起作用。

來源

2011-03-24 13:27:48 trgraglia

你應該問自己的第一件事是 - 爲什麼你需要他們在同一高度？是因爲：

你想要背景是相同的大小？
中間的邊框是一樣的高度？
還是有上需要內嵌在其他分區的底部顯示底部的一些內容？

1）如果你想要的背景是相同的大小，那麼我勸你CSS樣式父格，在最壞的情況 - 所以它適合編輯的背景圖像。隨着CSS2您可以定位的背景容易

{ 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:center; 
}

2）每當我在你的問題絆倒，我需要中心邊界是相同的高度。解決方案很簡單 - 將邊框樣式應用於最長的DIV。

3）將這兩個內容合併到第三個兄弟DIV，如果你不能，那麼你將需要JavaScript。或者Pekka說 - 如果你不關心IE，可以使用display: table。

來源

2012-01-06 07:54:07

我正在處理中心邊界問題，但是任何一個Div的內容都很靈活。我的解決方案是設置border-right（左div）和border-left（右div），然後將右div的margin-left設置爲-1px。這種方式要麼可以是最長的，邊界將重疊。 – 2014-06-22 17:28:44

這周我就遇到了這個問題好幾次，這個話題是我來到找到一個具體的答案最接近的。這是@ Pekka對那些需要更多繼續的人的迴應的擴展，我當然這樣做。

jsFiddle

例如HTML：

<div class="view-table"> 
    <div class="view-row"> 
     <div class="view-type">Type</div> 
     <div class="view-name"> 
      Lorem ipsum dolor sit amet, at assum gubergren his, 
      ex iudicabit dissentiunt intellegebat has. Ne odio detraxit 
      instructior vim. Fugit velit consetetur an eos. 
      Ea suas veri mnesarchum mel. 
     </div>     
    </div> 
</div>

例如CSS：

.view-table 
{ 
    display:table; 
    width:100%; 
} 
.view-row 
{ 
    display:table-row; 
} 
.view-row > div 
{ 
    display: table-cell; 

} 
.view-name 
{ 
    text-align:right; 
    background-color: lightblue; 
} 
.view-type 
{ 
    background-color: pink; 
}

來源

2015-02-11 21:32:04

如果你知道你想設置頁面的高度內div的的佈局你可以做這樣的事情：http://codepen.io/anon/pen/vOEepW

<div class="container"> 
    <div class="secondary-content"> 
    <div class="content-inner"> 
    </div> 
    </div> 
    <div class="main-content"> 
    </div> 
</div>

將包含div的位置設置爲：relative，然後將其中一個內部div設置爲絕對位置，以允許另一個「未設置」div來有效控制兩者的高度。

.container { 
    position: relative; 
} 
.main-content { 
    width: 80%; 
    margin-left: 20%; 
    height: 300px; 
    background-color: red; 
} 
.secondary-content { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 20%; 
    overflow-y: scroll; 
}

也可以做到這一點，也許使用flexbox更容易，但它有一些瀏覽器支持問題。

來源

2015-04-27 13:56:00 jgkingston

什麼是Flexbox方式？瀏覽器支持現在很好.. – 2017-06-20 21:13:12

這有點超出範圍，但我有一個討厭的Javascript解決方案。

HTML：

<div id="element-without-height" copy-size="#element-with-height"></div> 
<div id="element-with-height"></div>

的Javascript（使用jQuery）：

$(document).ready(function() { 
    $(window).on('resize', function() { 
     $('[copy-size]').each(function() { 
      var copyEl = $($(this).attr('copy-size')); 
      var targetEl = $(this); 
      targetEl.width(copyEl.width() + 'px'); 
      targetEl.height(copyEl.height() + 'px'); 
     }); 
    }); 
});

來源

2017-11-27 20:49:54 hawaii

相關問題