Сделайте два плавающих элемента CSS той же высотой

У меня есть два элемента, которые могут различаться по высоте и оба плавают рядом друг с другом. Проблема в том, что она выглядит довольно уродливо, если одна коробка выше другой. Поэтому я хочу, чтобы они были одинаковой высоты.Сделайте два плавающих элемента CSS той же высотой

Один из способов я думал, что, возможно, будет работать слишком, чтобы обернуть их в контейнер DIV и надеюсь, что выше, один изменяет его и меньший расширяется по размеру пространство:

HTML:

<div id="outerBox"> 
<div class="innerBoxLeft"></div> 
<div class="innerBoxRight"><br /><br /><br /></div> 
</div>

CSS:

.outerBox 
{ 
width: 100%; 
} 

.innerBoxLeft 
{ 
float:left; 
width: 45%; 
height: 100%; 
} 

.innerBoxRight 
{ 
float:right; 
width: 45%; 
height: 100%; 
}

не работает. Я считаю, что это может быть из-за того, что внешний div не имеет установленной высоты, и по какой-то причине меньшая коробка и ее 100-процентная высота не имеют ничего общего. Я не могу дать ему высоту набора, потому что это победит точку.

Итак, если нет другого способа, я предполагаю, что задаю вопрос: как установить высоту дочернего элемента в качестве родительского элемента?

Благодаря

источник

2009-07-23 Damien

Почему бы вам не использовать таблицу?

Это становится нелепым. Пользователь хочет видеть таблицу. Язык HTML предоставляет элемент таблицы для достижения цели, которую хочет пользователь. Тем не менее, мы используем целую библиотеку (я смотрю на ответ JQuery), чтобы достичь цели без таблицы, хотя это означает, что скрипт работает на клиенте!

источник

2009-07-23 14:49:06

jQuery - довольно легкая библиотека, все рассмотренные вещи и скорость соединения становится все быстрее и быстрее, это почти не проблема для большинства пользователей. Таблицы - это самый простой ответ, но не всегда лучший. Для отображения данных в моде, подобных электронной таблице, таблицы, безусловно, подходят, но для определения того, что я уверен, Дэмиен надеется быть чистым семантическим веб-сайтом, это не идеальное решение. – Andrew

+10

Проблема не в размере, а в акте сценариев. Вы решаете проблему статического макета динамическим способом смены. На медленном компьютере вы можете видеть, как изменяется ваш макет по сценарию. Если пользователь отключил Javascript, он получает неправильный макет. Нужно попробовать отдельный HTML (контент) из CSS (макет) из Javascript (действие) и не решать проблемы одного с другим. –

Как и все остальное, это зависит от клиента или личных предпочтений. Я очень полагаюсь на разделение контента и макета, но на самом деле это ваша аудитория. Для личных проектов я возьму несколько вещей о своей целевой аудитории (поддержка Flash, Javascript, высокоскоростные соединения, современные браузеры), и я буду развиваться соответствующим образом. Данные аналитики обычно подтверждают мои предположения обо всех этих моментах. В конце концов, если в HTML/CSS нет простого (или семантически допустимого) ответа, я не вижу смысла использовать немного JS для устранения этих недостатков. – Andrew

Один из способов сделать следующее без использования JavaScript осуществляется с помощью метода, называемого лже-Колонны.

В основном это связано с применением background-image к родительским элементам перемещаемых элементов, что заставляет вас полагать, что эти два элемента имеют одинаковую высоту.

Более подробная информация доступна по адресу:

A List Apart: Articles: Faux Columns

источник

2009-07-23 14:24:01

Я видел это, но коробки довольно модульные конструкция (то есть они стильные коробки), поэтому я не уверен, насколько идеально это решение. – Damien

Есть несколько способов, с различной степенью сложности и успеха. Один метод, который работает для меня ( ~~я не помню, где я видел это первый~~link, problems) заключается в следующем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
     #page { 
      clear:both; 
      overflow:hidden; 
      width:100%; 
     } 
     #page div { 
      margin:0 0 -6000px 0; /* nothing special about 6000px */ 
      padding:0 0 6000px 0; /* any large enough value will do */ 
     } 
     div.article { 
      background:blue; 
      float:left; 
      width:70%; 
     } 
     div.sidebar { 
      background:red; 
      float:right; 
      width:30%; 
     } 
    </style> 
</head> 
<body> 

<div id="page"> 
    <div class="article"> 
     <p>Some content</p> 
    </div> 
    <div class="sidebar"> 
     <p>Some content</p> 
     <p>Some content</p> 
     <p>Some content</p> 
    </div> 
</div> 
</body> 
</html>

источник

2009-07-23 14:30:21

Почти там, ожидайте, что это разрезы нижней части коробки. Я буду обновлять по мере того, как я прогрессирую – Damien

@Damien да, 'border-bottom' на содержащихся' div 'будет отключен. Я обычно проектирую вокруг этого, но тогда мои проекты не так уж сложны. –

Также обратите внимание, что этот макет разбивается на якоря (например, страницы часто задаваемых вопросов) –

редко работают Проценты, как высоты в CSS. Чтобы высота ребенка была такой же, как у их родителя, вы можете использовать немного Javascript. Вот что это будет выглядеть в JQuery:

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() {  
      var containerheight = $("outerBox").height; 
      $(".outerBox").children().css("height",containerheight) 
    </script>

Если вы хотите просто сделать коробки в контейнере такого же размера, Нить Group имеет большой плагин для выравнивания высоты коробки с JQuery, и это очень хорошо документированы:

Equal Heights With jQuery

источник

2009-07-23 14:33:34 Andrew

Голосуйте это до бесконечности, если вам нравится, но я думаю, что я мог бы также Вак эту часть конструкции в таблице ...

источник

2009-07-23 14:43:05 Damien

Я думаю, что таблицы должны использоваться для того, для чего они были созданы - и это хранение данных, а не отображение макета.

Если вы хотите хороший, кросс-браузер & хакерский CSS-решение - check this article.

источник

2009-08-07 08:22:11 zeroDivisible

Хотя я согласен с комментарием к вашим таблицам, это решение, по сути, совершает один и тот же грех не семантической разметки. Использование таблицы для чего-то, что на самом деле не является таблицей (необязательно должно быть строгими данными), совершает один и тот же грех, потому что контент не должен быть таблицей. Множественные не семантические divs, которые сделаны исключительно для создания фоновых столбцов фона, так же плохи на этом фронте, IMO. Если у вас уже есть эти обертки по семантическим причинам (страница> контент> раздел> статья и т. Д.), То я думаю, что это сработает. – kmiyashiro

Поздно к вечеринке, но вот [мой свинг] (http://jsfiddle.net/thirdender/vxuUr/) в равных столбцах (аналогично связанной статье), используя: перед псевдоселекторами. Не очень полезно, но кто-то может найти это «интересным» (или плохим ... заставляющим думать хотя бы?) – thirdender

function setSameHeight(class_name){ 
    var max_height = 0; 
    var cards = getElementsByClassName(class_name);  
    for (var i=0; i<cards.length; i++){ 
    if (cards[i].offsetHeight > max_height){     
     max_height = cards[i].offsetHeight; 
    } 
    } 
    for (var i=0; i<cards.length; i++){ 
    cards[i].setAttribute("height", max_height); 
    cards[i].height = max_height;   
    } 
} 

function getElementsByClassName(className){ 
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); 
    var allElements = document.getElementsByTagName("*"); 
    var results = []; 
    var element; 
    for (var i = 0; (element = allElements[i]) != null; i++) { 
    var elementClass = element.className; 
     if (elementClass && elementClass.indexOf(className) != -1 &&  hasClassName.test(elementClass)) 
     results.push(element); 
    } 
    return results; 
}

используется, что для таблиц

источник

2011-06-28 07:07:01 megamanx

Это можно сделать чистым css .. – raven

Попробуйте это: http://www.filamentgroup.com/examples/equalHeights/

Это простой в использовании JQuery плагин, который вы можете просто использовать на родительском контейнере и все топ-уровня дочерние элементы устанавливают той же высоты, что и самая высокая.

источник

2012-10-24 18:33:30

Использование display:table-cell;

Это очень полезно в двух столбцах дизайн электронной почты (ширина отзывчивым).

Просмотреть demo здесь.

источник

2013-11-08 03:43:01 raven

function evenup(){ 
     var maxHeight = Math.max.apply(null, $(".myClass").map(function(){ 
      return $(this).height(); 
     }).get()); 
    $(".myClass").height(maxHeight); 
}

источник

2014-09-09 18:39:29 Shawn

Если вы действительно хотели, чтобы div действовал как таблица, вы можете просто настроить css «display» div.

дисплей: таблица для контейнера DIV

дисплей: настольные ячейки для DIV внутри, чтобы действовать как тд

источник

2015-08-13 09:29:10 Andrew

Сделайте два плавающих элемента CSS той же высотой

ответ

Смежные вопросы