Смешивание CSS и абсолютная высота

106
11

Есть ли способ использовать как абсолютные (в px), так и относительные высоты для элементов html div? Я бы хотел создать панель навигации и хочу, чтобы остаток использовался в div.

Я создал jsfiddle (.bot нужно выделить оставшуюся высоту). В примере у него есть полоса прокрутки, которая нежелательна.

Edit: Чем больше я читаю об этом, тем больше я понимаю, что это кажется реальной проблемой. Я, конечно, не намерен переносить маржу во все вложенные уровни...

Edit2: я был после решения, которое позволяет мне разбить .bot на два равных высоты div, что означает, что бот-div не может быть просто наложен верхним. Я нашел решение (используя calc), но никогда не слышал об этом раньше и не уверен, что он будет сохранен для использования.

спросил(а) 2013-02-15T08:37:00+04:00 7 лет, 7 месяцев назад
1
Решение
113

Я не уверен, насколько хорош ответ, это с точки зрения совместимости с браузером, но это, похоже, работает в хроме. По-видимому, существует функция calc которая динамически обновляет результат в css. Может ли кто-нибудь прокомментировать это решение?

ответил(а) 2013-02-15T10:05:00+04:00 7 лет, 7 месяцев назад
42

Это, безусловно, поможет вам... проверено на ie, ff, chrome

html, body { 
height: 100%;
width: 100%;
margin: 0;
}

.top {
height: 7%;
min-height: 38px;
max-height: 38px;
background-color: green;
}

.bot {
height: 93%;
background-color: blue;
position: relative;
}

.half {
height: 50%;
background-color: pink;
position: relative;
}

.half2 {
height: 50%;
background-color: yellow;
position: relative;
}

ответил(а) 2013-02-15T10:02:00+04:00 7 лет, 7 месяцев назад
40

для первого вопроса:

.top {
width: 100%;
height: 40px;
position: absolute;
}
.bot {
height:100%;
width:100%;
margin-top:40px;
}

для второго вопроса он относится к этому родительскому элементу, если только он не был создан фиксированным.

ответил(а) 2013-02-15T09:47:00+04:00 7 лет, 7 месяцев назад
41

Вы можете манипулировать выходом, добавляя значение margin-top -ve и добавляя пустой div для указания высоты

HTML

 <div class='top'>
some top stuff...
</div>

<div class='bot'>
<div class="space"></div>
some bot stuff...
</div>

CSS

.space{height:40px}
.bot {
margin-top:-40px;
z-index:0;
height: 100%;
background-color: blue;
position: relative;
}

DEMO

ответил(а) 2013-02-15T08:44:00+04:00 7 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема