Высота Div не распространяется на нижнюю часть страницы

Question

Высота Div не распространяется на нижнюю часть страницы

0

У меня есть макет страницы для веб-сайта, который я разрабатываю, что-то вроде этого:

-------------------------------------Top Bar-------------------------------------
|                                                                               |
---------------------------------------------------------------------------------
--------Content (Has a dark filter that goes over the main background image)-----
------------ Main Content---------------------------|-------------SideBar--------
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
---------------------------------------------------------------------------------

На моей странице обычно есть фотография, которая для целей дизайна мне нужно применить темный фильтр. Поэтому я создаю класс.content, который служит этой цели, и все (кроме верхней панели) входит в него.

Проблема заключается в том, что, когда содержимое в контейнере.main-content превышает высоту страницы, фильтр не попадает в нижнюю часть страницы. У меня высота.content на 100%, а также тело и теги html.

html {
    font-size: 16px;
    height:100%;
    overflow:auto;
}
body {
    font-size: 62.5%;
    /*10px = 1em*/
    line-height: 1.4;
    width:100%;
    height: 100%;
    min-height: 100%;
    overflow: auto;
}
.top-bar {
    width:100%;
    height:58px;
    position:fixed;
    top:0px;
    z-index: 5;
}
.top-bar.user {
    background-color:rgba(0, 0, 0, 1);
    font-size: 1.2em;
}
.content {
    display: block;
    margin-top: 58px;
    /* = top bar height*/
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main-content {
    float: left;
    width: 75%;
    height: 100%;
}
.sidebar {
    position: fixed;
    right: 0;
    width: 25%;
    height: 100%;
}

Я попытался создать проблему здесь: http://jsfiddle.net/apGgd/3/

Вы видите, что по мере расширения таблицы фильтр (серый фон) не проходит по нему. Однако, если вы удалите "height: 100%" из.content, проблема исчезнет.

bfilipesoares 22 окт. 2013, в 18:43

Источник

0

Извините, я не думаю, что понимаю проблему. Эта проблема, кажется, .content когда вы .content объявления высоты в классе .content . Вы ищете объяснение?
usernolongerregistered 22 окт. 2013, в 16:49
0

Дело в том, что удаление высоты: 100%, может испортить некоторые другие страницы, которые я получил. Однако, поскольку это, кажется, единственное решение (или, по крайней мере, самое очевидное), я приму его и попытаюсь адаптировать другие страницы к нему.
bfilipesoares 22 окт. 2013, в 17:14

Теги:

html

css

2 ответа

0

вы просто удаляете высоту: 100%; из раздела.content и добавить переполнение: show; (если предыдущий не работает)

Rajeev K Tomy 22 окт. 2013, в 15:53

Ещё вопросы

Извините, я не думаю, что понимаю проблему. Эта проблема, кажется, .content когда вы .content объявления высоты в классе .content . Вы ищете объяснение?
Дело в том, что удаление высоты: 100%, может испортить некоторые другие страницы, которые я получил. Однако, поскольку это, кажется, единственное решение (или, по крайней мере, самое очевидное), я приму его и попытаюсь адаптировать другие страницы к нему.

PlantTheIdea · Accepted Answer · 2013-10-22T14-48-00.000Z

Причина, по которой он работает, заключается в том, что вы удаляете height:100% - это потому, что вам не нужно явно объявлять ее. Вы хотите height:auto; min-height:100%; height:auto; min-height:100%; , Это гарантирует, что высота не менее 100%, но при необходимости заполнит таблицу, которая, я думаю, является поведением, которое вы хотите.

Обновлен jsFiddle

Я бы предложил полностью удалить декларации высоты, если вы получите желаемый результат без него ... декларация высоты по умолчанию не всегда равна высоте: в любом случае, авто, насколько я знаю ...
@AntonioVasilev - если он хочет, чтобы он растягивался до самого дна, даже если контент этого не позволяет, ему нужно объявить min-height:100%; некоторые браузеры (более старые версии Firefox) требуют явного объявления height для применения min-height , в противном случае он переключится обратно на auto .