Задайте высоту <div>= высоте другого <div> через .css - программирование
Подтвердить что ты не робот

Задайте высоту <div>= высоте другого <div> через .css

У меня есть два элемента <div> на этом сайте. Это сайт, который я разрабатываю, и это незавершенное производство, но некоторые варианты дизайна, которые я хотел бы завершить сегодня. Прямо сейчас моя упрощенная .css такова:

#leftdiv {
    /*this is the navigation pane*/
    min-height: 600px;
    max-height: 600px;
}
#rightdiv {
    /*this is the primary pane*/
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

Я установил жесткие минимальные и максимальные высоты для обоих, чтобы они сохраняли одну и ту же высоту, и если содержимое переполняется из #rightdiv, появляется полоса прокрутки. Я бы хотел, чтобы этот полоса прокрутки исчезла, а растягивание #rightdiv и #leftdiv соответствовало содержимому #rightdiv. На странице, которую я связал, вы видите, что есть содержимое, которое переполняет границы #rightdiv и полосы прокрутки. Я хочу, чтобы весь сайт растягивался по высоте, чтобы соответствовать содержимому, но если я удалю overflow-y: auto; из моего .css и удаляю максимальные высоты, #rightdiv растягивается, но #leftdiv не дает, уступая какой-то действительно уродливый дизайн.

Мне бы хотелось что-то вроде ниже:

#leftdiv {
    min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
}
#rightdiv {
    min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
}

Как мне настроить минимальную высоту и так?

4b9b3361

ОТВЕТЫ

Ответ 1

Я предполагаю, что вы использовали атрибут высоты для обоих, поэтому я сравниваю его с высотой left сделать это с помощью javasript

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Еще одна идея здесь HTML/CSS: создание двух плавающих div с одинаковой высотой

обратите внимание, что этот код не протестирован

Спасибо, я надеюсь, что это поможет вам... приветствует...:)

Ответ 2

Если вам не нравятся пользователи IE6 и IE7, просто используйте display: table-cell для своих div:

демо

Обратите внимание на использование оболочки с display: table.

Для пользователей IE6/IE7 - если они у вас есть - вам, вероятно, придется отступить к Javascript.

Ответ 3

Если вы открыты для использования javascript, вы можете получить свойство на элементе, подобном этому: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

И вы можете установить атрибут для элемента следующим образом: .setAttribute('style','max-height:'+heightVariable+';');

Примечание. Если вы просто хотите установить свойство element max-height в одной строке, вы можете сделать это следующим образом:

#leftdiv,#rightdiv
{
    min-height: 600px;   
}

Ответ 4

Вы, конечно, выиграли бы от использования гибкой структуры для своего проекта. Это сэкономит вам массу головных болей. Однако, видя структуру вашего HTML, я бы сделал следующее:

Пожалуйста, проверьте пример: http://jsfiddle.net/xLA4q/

HTML:

<div class="nav-content-wrapper">
 <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
 <div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>

CSS

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}