Как достичь равных высот divs (расположенных бок о бок) с HTML/CSS?
У меня есть два div внутри контейнера. Один слева, один справа, бок о бок. Как я могу сделать каждый из них одинаковой высоты, даже если они имеют различный контент.
Например, правый div имеет много контента и удваивает высоту левого div, как сделать левое div растягиваться на одну и ту же высоту правого div?
Есть ли какой-нибудь код JavaScript (jQuery) для выполнения этого?
Ответы
Ответ 1
Вы можете использовать jQuery, но есть лучшие способы сделать это.
Этот вопрос возникает много, и в целом есть 3 ответа...
Это лучший способ сделать это, поскольку это самый семантически чистый подход (не прибегая к JS, у которого есть свои проблемы). Лучшим способом является использование display: table-cell и связанных значений. Вы также можете попробовать искусственную фоновую технику (которую вы можете использовать с градиентами CSS3).
Это, кажется, отлично работает, но за счет наличия неземного макета. Вы также будете волноваться с пуристами. Я почти избегал использования таблиц, и вам тоже нужно.
Это дает преимущество при использовании самой семантической разметки, кроме как с отключенным JS, вы не получите желаемого эффекта.
Ответ 2
Здесь способ сделать это с помощью чистого 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>
Это выглядит так:
![enter image description here]()
Ответ 3
вы можете заставить его работать с js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
Ответ 4
Я видел много попыток сделать это, хотя никто не отвечал моим потребностям OCD. Возможно, вам понадобится выделить секунду, чтобы обдумать это, хотя это лучше, чем использование JavaScript.
Известные недостатки:
- Не поддерживает несколько строк элементов в случае контейнера с динамической шириной.
- Не работает в IE6.
База:
![base layout]()
- красный - контейнер (вспомогательный), который вы использовали для установки поля для содержимого.
- зеленый -
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; (не устанавливайте левое или правое положение).
![base with absolute]()
Все ваши элементы теперь имеют равную высоту. Для большинства макетов это уже достаточно. Мой сценарий должен иметь динамический контент, за которым следует статический контент, где статический контент должен находиться в одной строке.
![enter image description here]()
Для этого вам нужно добавить padding-bottom (темно-зеленый) экв к фиксированному по высоте содержимому в элементы синий.
![enter image description here]()
Затем в желтых элементах создается еще один абсолютно позиционированный элемент (left: 0; bottom: 0;) ( темно-синий).
![enter image description here]()
Предположительно, если эти поля (желтый) должны были быть активными гиперссылками, и у вас был любой стиль, который вы хотели применить к исходным синим полям, вы должны использовать соседний селектор:
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.
Ответ 5
здесь очень простое решение с коротким дисплеем 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;
}
выглядит так:
![enter image description here]()
Ответ 6
Ну, я не делаю тонну jQuery, но в мире CSS/Javascript я бы просто использовал объектную модель и написал инструкцию следующим образом:
if(leftDiv.style.height > rightDive.style.height)
rightDiv.style.height = leftDiv.style.height;
else
leftDiv.style.height = rightDiv.style.height)
Ответ 7
Также есть плагин jQuery под названием equalHeights, который я использовал с некоторым успехом.
Я не уверен, что тот, который я использую, это тот, который указан выше, или если он тот, который был первым google result... В любом случае плагин jquery, вероятно, является самым простым и гибким способом.
Ответ 8
Используйте это в функции готовности jquery. Учитывая, что есть два div с идентификаторами "left" и "right".
var heightR = $("#right").height();
var heightL = $("#left").height();
if(heightL > heightR){
$("#right").css({ height: heightL});
} else {
$("#left").css({ height: heightR});
}
Ответ 9
Хотя многие не согласны с использованием 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.
Ответ 10
Это то, что я использую в простом 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;
}
Ответ 11
Я согласен с первоначальным ответом, но решение 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');
});
}
}
