CSS等於DIV高度

我有這個網站：CSS等於DIV高度

<div id="wrapper"> 
    <div id="left">left<br/>asdfa</div> 
    <div id="right">right</div> 
    <div style="clear:both"></div> 
</div>

和CSS：

#wrapper { 
    width: 400px; 
    background-color:green; 
    display:table; 
} 
#left { 
    display:table-cell; 
    float:left; 
    width:100px; 
    background: blue; 
} 
#right { 
    height:auto; 
    width:100px; 
    background: red; 
    float:right; 
}

如何作出正確的股利，以適應包裝div的高度？

來源

2014-02-06 user2361682

你嘗試「高度：100％「？ – Gagaro

我試過所有現有的高度，它不工作。 – user2361682

有2種方式來做到這一點：

1）設置成等於高度對於所有3倍的DIV examle：

#wrapper { 
    width: 400px; 
    background-color:green; 
    display:table; 
    height:50px; 
} 
#left { 
    display:table-cell; 
    float:left; 
    width:100px; 
    background: blue; 
    height:50px; 
} 
#right { 
    width:100px; 
    background: red; 
    float:right; 
    height:50px; 
}

演示：fiddle

2）

地址：

#right { 
    height:100%; 
    overflow:auto; 
}

演示：fiddle

來源

2014-02-06 10:15:44 CodeMonk

加入overflow：auto;做的伎倆。謝謝 – user2361682

Fiddle

#right { 
    text-align: right; 
    display:table-cell; 
    height:100%; 
    width:100px; 
    background: red; 
    position: relative; 
}

來源

2014-02-06 10:11:54 JunM

，你可以試試這個，告訴我，如果它的工作與否。

的style.css

#right { 
position: relative; 
height: 100%; 
width: 100px; 
background: red; 
float: right; 
}

來源

2014-02-06 10:12:09 KevinHaugen

它沒有工作。 – user2361682

你想要正確的div具有相同的高度和覆蓋在這個包裝像藍色在這個小提琴？ http://jsfiddle.net/62DQ8/ – KevinHaugen

使用jQuery可能有點矯枉過正，如果CSS修復上面爲你工作，但在Zurb的傢伙展示等於一個相當簡潔的方式出的div的高度：

https://github.com/zurb/foundation/issues/1358

下面是一個grid代碼片段和一個block-grid代碼片段的例子。你會注意到一些數據屬性，數據匹配高度和數據高度關注。這些都是用來範圍要用作相同的高度和紀念的孩子，將目光高度匹配的元素的父。
<div class="row" data-match-height> 
    <div data-height-watch class="small-3 columns" style="background: pink;"> 
    <p>Some text...</p> 
    </div> 
    <div data-height-watch class="small-6 columns" style="background: orange;"> 
    <p>Some text...</p> 
    <img src="http://placehold.it/300x300"> 
    </div> 
    <div data-height-watch class="small-3 columns" style="background: lightblue;"> 
    <p>Some text...</p> 
    </div> 
</div> 
從這裏，我創建了一個有些JS會做的魔力：
$("[data-match-height]").each(function() { 

    var parentRow = $(this), 
     childrenCols = $(this).find("[data-height-watch]"), 
     childHeights = childrenCols.map(function(){ return $(this).height(); }).get(), 
     tallestChild = Math.max.apply(Math, childHeights); 

    childrenCols.css('min-height', tallestChild); 

}); 
您可以包括這個JS下在頁面底部的JS鏈接app.js。

來源

2014-02-06 10:20:17 BiscuitBaker

HTML

 <div id="left">left<br/>asdfa</div> 
     <div id="right">right</div>  
     <div style="clear:both"></div> 
    </div>

CSS

#wrapper { 
    width: 400px; 
    background-color: green; 
    display: table; 
} 
#left { 
    display: table-cell; 
    float: left; 
    width: 100px; 
    background: blue; 
} 
#right { 
    background-color: red; 
    display: table-cell; 
    padding-top: 5px; 
    width: 50%; 
}

Fiddle

來源

2014-02-06 10:24:55

這許多更新不是必需的。

只能放顯示：table-cell in #right css。而已。它會解決你的問題。

來源

2014-02-06 10:33:27 SpiderCode

新answare使用JavaScript

FIDDLE：http://jsfiddle.net/62DQ8/62/

添加這個在<head>HERE</head>

<script language="JavaScript" type="text/javascript"> 
var h = document.getElementById("wrapper").offsetHeight; 
document.getElementById("right").style.height = h + "px"; 
</script>

來源

2014-02-06 10:49:00 KevinHaugen

使用這種高度相等的jQuery

setHeight($('.wrapper > div')); 

function setHeight(col) { 
    var $col = $(col); 

    var $maxHeight = 0; 
    $col.each(function() { 
     var $thisHeight = $(this).outerHeight(); 
     if ($thisHeight > $maxHeight) { 
      $maxHeight = $thisHeight; 
     } 
    }); 
    $col.height($maxHeight); 
}

來源

2014-09-01 08:53:57

CSS等於DIV高度

回答

相關問題