Установите HTML-элемент на 100% высоты на странице с заголовком - PullRequest
Новая
       35

Установите HTML-элемент на 100% высоты на странице с заголовком

2 голосов
/ 12 сентября 2011

Как настроить HTML-элемент на 100% высоты на странице с заголовком с фиксированной высотой?Разметка, конечно, не является фиксированной высотой.

У меня уже есть html и body, настроенные для имитации min-height: 100% правильно.

Я попробовал следующие идеи, но безрезультатно:

1. Я использовал следующий CSS, но он использует высоту, основанную на процентах, которая не работает, потому чтозаголовок моего макета имеет фиксированную высоту 81px. 

#divContent
{
    height: 82%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
}

2. Я использовал следующее в различных комбинациях отступов и полей, но все они увеличивают высотустраницы (то есть hidden), в результате чего все они выглядят одинаково: нижняя часть 81px скрыта. 

html, body
{
    overflow: hidden;
    margin-bottom: 82px;
    padding-bottom: 82px;
}
#divContent
{
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
    margin-bottom: 82px;
    padding-bottom: 82px;
}

Я хочу, чтобы мой divContent потреблял всю высоту тела минус81px.

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

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

1 Ответ

3 голосов
/ 12 сентября 2011

Установите нижнюю часть div на 0px.Это расширит div, чтобы использовать оставшуюся часть страницы 

#divContent
{

    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    bottom: 0px;   
    width: 950px;
}

Вот очень похожий вопрос, на который я ответил некоторое время назад

Как создать этот макет с помощью CSS?

...