如何讓兩個不同背景的2個div在高度相同的情況下在其中一個高度設置爲自動和最大高度？

我已經看過20個線程至少到目前爲止很抱歉，如果這已被回答之前，但我找不到適合我的特定CSS佈局的解決方案。如何讓兩個不同背景的2個div在高度相同的情況下在其中一個高度設置爲自動和最大高度？

我想以左列等於contentcolumn的方式將2列的高度設置爲彼此相等。我一直在使用JavaScript的多個這樣的嘗試： `

$(document).ready(function() { 

    // get the heights 
    l = $('#contentcolumn').height(); 

    // get maximum heights of all columns 
    h = Math.max(l); 

    // apply it 
    $('#leftcolumn').height(h); 
    });

和：

document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;

和：

$("#contentcolumn").height($("#leftcolumn").height())

與第一代碼的問題是，它滴左格到我甚至不知道的很長的高度。第二個和第三個代碼根本不會改變。

有人可以請幫我我知道這可能是一個非常簡單的解決方案，但我無法找到，我只是不能去睡覺，直到我做！

新網頁後清理：

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="maincontainer"> 
<div id="topsection"></div> 
<div id="leftcolumn"></div> 
<div id="contentcolumn"> 
</div> 
</font> 
</body> 
</html>

新建CSS後清理：

body, 
html { 
background: #cacaca url(img/bg.png) repeat-x; 
} 
#maincontainer { 
width:1000px; 
margin:0 auto; 
background: url(img/bg5.png) repeat-x; 
} 
#topsection { 
background: #ffffff url(img/bg4.png) repeat-y; 
height: 10px; 
} 
#leftcolumn { 
float:left; 
height: 100%; 
width: 145px; 
background: url(img/bg2.png) repeat-y; 
} 
#contentcolumn { 
margin-left: 145px; /*Set left margin to LeftColumnWidth*/ 
min-height: 800px; 
height: auto; 
background: #dbdbdb url(img/bg3.png) repeat-x; 
padding:10px; 
}

來源

2012-07-21 Hamdan

你可以做到這一點沒有JavaScript的 - 在一個跨瀏覽器的方式，甚至是。這利用了相對定位元件內的絕對定位元件。如果將#maincontainer div設置爲position: relative，並將#leftcolumn div設置爲position: absolute，則可以在#leftcolumn上設置top和bottom，因此即使＃maincontiner的高度正在設置，它始終會假定其父級（#maincontainer）的高度由其子女設置（本例中爲#contentcolumn）。使用此jsfiddle demo並使用＃contentcolumn的高度來查看#leftcolumn如何響應。

HTML：

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    </head> 
    <body> 
     <div id="maincontainer"> 
      <div id="topsection"></div> 
      <div id="leftcolumn"></div> 
      <div id="contentcolumn"></div> 
     </div> 
    </body> 
</html>

CSS：

body, 
html { 
    background: #cacaca; 
} 

#maincontainer { 
    position: relative; 
    width:500px; 
    margin:0 auto; 
    background: #000; 
} 

#topsection { 
    background: #ffffff; 
    height: 10px; 
} 

#leftcolumn { 
    position: absolute; 
    top: 10px; /* room for #topsection */ 
    bottom: 0; 
    left: 0; 
    width: 145px; 
    background: red; 
} 

#contentcolumn { 
    margin-left: 145px; /*Set left margin to LeftColumnWidth*/ 
    min-height: 500px; 
    height: auto; 
    background: #dbdbdb; 
    padding:10px; 
}

來源

2012-07-21 05:21:30

感謝那些工作就像一個魅力一切我需要做的就是改變背景標籤和我是好去感謝一個億= d – Hamdan 2012-07-21 06:42:44

如何讓兩個不同背景的2個div在高度相同的情況下在其中一個高度設置爲自動和最大高度？

回答

相關問題