У меня есть два div внутри контейнера. Один слева, один справа, бок о бок. Как я могу сделать каждый из них одинаковой высоты, даже если они имеют различный контент.
Например, правый div имеет много контента и удваивает высоту левого div, как сделать левое div растягиваться на одну и ту же высоту правого div?
Есть ли какой-нибудь код JavaScript (jQuery) для выполнения этого?
Вы можете использовать jQuery, но есть лучшие способы сделать это.
Этот вопрос возникает много, и в целом есть 3 ответа...
Это лучший способ сделать это, поскольку это самый семантически чистый подход (не прибегая к JS, у которого есть свои проблемы). Лучшим способом является использование display: table-cell и связанных значений. Вы также можете попробовать искусственную фоновую технику (которую вы можете использовать с градиентами CSS3).
Это, кажется, отлично работает, но за счет наличия неземного макета. Вы также будете волноваться с пуристами. Я почти избегал использования таблиц, и вам тоже нужно.
Это дает преимущество при использовании самой семантической разметки, кроме как с отключенным JS, вы не получите желаемого эффекта.
Здесь способ сделать это с помощью чистого CSS, однако, как вы заметите в примере (который работает в IE 7 и Firefox), границы могут быть трудными - но они не невозможны, поэтому все зависит от того, что Вы хотите сделать. Этот пример предполагает довольно общую структуру CSS body > wrapper > контейнер содержимого > столбец 1 и столбец 2.
Ключ - нижнее поле и его отмена.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">
<div id="left_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
</div><!-- LEFT COLUMN -->
<div id="right_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
<p> </p>
<p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
<p> </p>
<p>Is there some JavaScript (jQuery) code to accomplish this?</p>
</div><!-- RIGHT COLUMN -->
</div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>
Это выглядит так:
вы можете заставить его работать с js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
Я видел много попыток сделать это, хотя никто не отвечал моим потребностям OCD. Возможно, вам понадобится выделить секунду, чтобы обдумать это, хотя это лучше, чем использование JavaScript.
Известные недостатки:
База:
position: relative; overflow: hidden и (необязательно, если вы хотите, чтобы столбцы были центрированы) text-align: center; font-size: 0; line-height: 0;display: block; float: left; или (необязательно, если вы хотите, чтобы столбцы были центрированы) display: inline-block; vertical-align: top;Пока ничего необычного. Независимо от того, какой контент имеет элемент синий, вам нужно добавить абсолютно позиционированный элемент ( желтый; обратите внимание, что z-index этого элемента должен быть ниже фактического содержимого синий блок) с этим элементом и установите top: 0; bottom: 0; (не устанавливайте левое или правое положение).
Все ваши элементы теперь имеют равную высоту. Для большинства макетов это уже достаточно. Мой сценарий должен иметь динамический контент, за которым следует статический контент, где статический контент должен находиться в одной строке.
Для этого вам нужно добавить padding-bottom (темно-зеленый) экв к фиксированному по высоте содержимому в элементы синий.
Затем в желтых элементах создается еще один абсолютно позиционированный элемент (left: 0; bottom: 0;) ( темно-синий).
Предположительно, если эти поля (желтый) должны были быть активными гиперссылками, и у вас был любой стиль, который вы хотели применить к исходным синим полям, вы должны использовать соседний селектор:
yellow:hover + blue {}
Вот код и демонстрация:
HTML:
<div id="products">
<ul>
<li class="product a">
<a href="">
<p class="name">Ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Ordinary product description.</p>
</li>
<li class="product b">
<a href="">
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
<div class="icon-product"></div>
</a>
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
</li>
<li class="product c">
<a href="">
<p class="name">Another ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Another ordinary product description.</p>
</li>
</ul>
</div>
SCSS/МЕНЬШЕ:
#products {
ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0; padding: 0; margin: 0;
li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
}
li {
a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
.icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
.name { opacity: 1; }
}
.name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }
a:hover {
background: #ddd; text-decoration: none;
.icon-product { background: #333; }
}
}
}
Обратите внимание, что демо использует обходное решение, которое включает дублирование данных для исправления z-index. В качестве альтернативы вы можете использовать pointer-events: none и любое решение для IE.
здесь очень простое решение с коротким дисплеем css: table
<div id="main" class="_dt-no-rows">
<div id="aside" contenteditable="true">
Aside
<br>
Here the aside content
</div>
<div id="content" contenteditable="true">
Content
<br>
geht pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
<br>
TIP : Just clic on this block to add/remove some text
</div>
</div>
здесь css
#main {
display: table;
width: 100%;
}
#aside, #content {
display: table-cell;
padding: 5px;
}
#aside {
background: none repeat scroll 0 0 #333333;
width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}
выглядит так:
Ну, я не делаю тонну jQuery, но в мире CSS/Javascript я бы просто использовал объектную модель и написал инструкцию следующим образом:
if(leftDiv.style.height > rightDive.style.height)
rightDiv.style.height = leftDiv.style.height;
else
leftDiv.style.height = rightDiv.style.height)
Также есть плагин jQuery под названием equalHeights, который я использовал с некоторым успехом.
Я не уверен, что тот, который я использую, это тот, который указан выше, или если он тот, который был первым google result... В любом случае плагин jquery, вероятно, является самым простым и гибким способом.
Используйте это в функции готовности jquery. Учитывая, что есть два div с идентификаторами "left" и "right".
var heightR = $("#right").height();
var heightL = $("#left").height();
if(heightL > heightR){
$("#right").css({ height: heightL});
} else {
$("#left").css({ height: heightR});
}
Хотя многие не согласны с использованием javascript для этого типа вещей, вот метод, который я использовал для этого, используя только javascript:
var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}
С "left" и "right", являющимся идентификатором двух тегов div.
Это то, что я использую в простом javascript:
Кажется длинным, но очень несложным!
function equalizeHeights(elements){
//elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")]
var heights = [];
for (var i=0;i<elements.length;i++){
heights.push(getElementHeight(elements[i],true));
}
var maxHeight = heights[biggestElementIndex(heights)];
for (var i=0;i<elements.length;i++){
setElementHeight(elements[i],maxHeight,true);
}
}
function getElementHeight(element, isTotalHeight){
// isTotalHeight triggers offsetHeight
//The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.
//http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript
{
isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true;
}
if (isTotalHeight){
return element.offsetHeight;
}else{
return element.clientHeight;
}
}
function setElementHeight(element,pixelHeight, setAsMinimumHeight){
//setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change...
{
setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false;
}
var heightStr = "" + pixelHeight + "px";
if (setAsMinimumHeight){
element.style.minHeight = heightStr; // pixels
}else{
element.style.height = heightStr; // pixels
}
}
function biggestElementIndex(arr){
//http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
var max = arr[0];
var maxIndex = 0;
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
maxIndex = i;
max = arr[i];
}
}
return maxIndex;
}
Я согласен с первоначальным ответом, но решение JS с методом equal_heights() не работает в некоторых ситуациях, представьте, что у вас есть продукты рядом друг с другом. Если вы должны применить его только к родительскому контейнеру, да, они будут одинаковой высоты, но разделы названия продукта могут отличаться, если они не подходят для двух строк, вот где я предлагаю использовать ниже
https://jsfiddle.net/0hdtLfy5/3/
function make_children_same_height(element_parent, child_elements) {
for (i = 0; i < child_elements.length; i++) {
var tallest = 0;
var an_element = child_elements[i];
$(element_parent).children(an_element).each(function() {
// using outer height since that includes the border and padding
if(tallest < $(this).outerHeight() ){
tallest = $(this).outerHeight();
}
});
tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px
$(element_parent).children(an_element).each(function() {
$(this).css('min-height',tallest+'px');
});
}
}