Силовой нижний колонтитул внизу страницы

У меня есть страница, где содержание мало, поэтому я нажал нижний колонтитул, чтобы всегда оставаться внизу. Он отлично работает. Но проблема в том, что у меня цвет фона для содержимого div. Естественно, я получаю пустое пространство для заполнения, которое я использовал.Силовой нижний колонтитул внизу страницы

Код:

<div id="holder"> 
    <div class="full_width_header">Some content</div> 
    <div id="featuredbg"> 
     <p>Body Content</p> 
    </div> 
    <div class="menubg"></div> 
</div>

Вы можете увидеть, что я имею в виду

Полная страница jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/embedded/result/

jsfiddle - http://jsfiddle.net/squidraj/K3Htx/2/

Можно ли сокрытием, что белое пространство с помощью цвета используется в контентной части, но не использует цвет в классе тела.

источник

2014-02-01 Prithviraj Mitra

Почему бы не применить цвет фона к родительскому элементу как тела, так и нижнего колонтитула? –

, поэтому вы не хотите добавлять цвет в html, body class? Как насчет '' Держатель '' Держатель? Вы можете добавить тот же цвет фона, что и '# featuredbg'? Или вы тоже пытаетесь найти это? – JCBiggar

Извините, я не понимаю. Вы хотите добавить цвет в элемент тела? –

Если вы не хотите добавлять цвет фона в тег тела, все, что вам нужно сделать, это удалить прописку из div featuredbg и добавить значение высоты. Вам также нужно будет добавить значение высоты в основную оболочку (держатель), чтобы вы поддерживали высоту: 100% в css.

код будет выглядеть следующим образом:

#holder { 
    min-height: 100%; 
    height: 100%; 
    position: relative; 
} 

#featuredbg { 
    background: #453A7E; 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    height: calc(100% - 110px); 
}

Значение высоты в featuredbg занимает 100% доступного пространство и минусы высоты футера (menubg). Если бы у вас всего 100%, то нижний колонтитул был бы проигнорирован, а featuredbg растянулся бы над нижним колонтитулом.

источник

2014-02-01 15:02:43 iamcode

Большое спасибо. Заглянул еще один способ сделать это. Очень гибкий. –

Силовой нижний колонтитул внизу страницы

ответ

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