Изображение в полный размер - Комната для нижнего колонтитула

Я бью свою голову против стены на этом. Я пытаюсь создать целевую страницу с полноэкранным фоном изображения, который останавливается на нижнем колонтитуле. Поэтому по существу я считаю, что моя проблема заключается в создании липкого нижнего колонтитула.Изображение в полный размер - Комната для нижнего колонтитула

Я следую учебному курсу this website.

Вот мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <code omitted> 
    </head> 

    <body> 
    <div id="wrapper"> 
     <div id="bkgcontainer"></div> 
     <div class="push"></div> 
    </div> 

    <footer> 
     <address> 
      <code omitted> 
     </address> 
    </footer> 
    </body> 
</html>

Мой CSS:

* { 
    margin: 0; 
} 
html, body{ 
    height: 100%; 
    background-color: black; 
} 
#wrapper { 
    width: 100%; 
    position: relative; 
    min-height: 100%; 
    margin: 0px auto -25px; 
} 
footer, .push { 
    height: 25px; 
} 

#bkgcontainer { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    margin: 0 auto -25px; 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    display: block; 
} 

footer{ 
    text-align: center; 
    margin: 0px auto; 
    color: white; 
    position: relative; 
}

Насколько я могу сказать, у меня есть все установлено правильно. Но когда я запускаю веб-сайт, «bkgcontainer» занимает весь экран, а нижнее поле «-25» находится ниже порта представления. Я в недоумении, какие-то идеи? Исправления или лучшие способы, я все уши.

источник

2014-12-08 Cody

вы смогли RESOL Ваша проблема? –

Не удалось найти время, чтобы вернуться к этому проекту. Я отправлю обратно, когда я это сделаю. – Cody

Вы можете попробовать position:fixed для класса колонтитула

footer{ 
    text-align: center; 
    margin: 0px auto; 
    color: white; 
    position: fixed; 
    bottom:0; 
    width:100% 
}

источник

2014-12-08 04:50:32 ASR

Вы должны изменить значение мин высоты на #wrapper либо в меньшем процентном значении или минимального значения пикселя, чтобы обеспечить колонтитул для отображения. Что вы сделали, так это сказать браузеру, что вы хотите, чтобы этот div расширялся не меньше, чем весь экран.

источник

2014-12-08 04:51:02

Вы можете сделать фоновое изображение занимают 90% от высоты экрана, сделать FOOTER 10%, и пин-код колонтитула в нижней части страницы:

//remove `footer` 
.push { 
    height: 25px; 
} 

//set height to 90%; 
#bkgcontainer { 
    width: 100%; 
    height: 90%; 
    position: relative; 
    margin: 0 auto -25px; 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    display: block; 
} 

//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too. 
footer{ 
    height: 10%; 
    text-align: center; 
    margin: 0px auto; 
    background-color: white; 
    position: fixed; 
    bottom:0; 
    width:100%; 
}

Смотрите this jsfiddle, чтобы увидеть, как это выглядит ,

источник

2014-12-08 04:54:24

Предполагается, что вы помещаете свое изображение в div '# bkgcontainer'. –

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

HTML:

<header> 
    this is header 
</header> 
<div id="content"> 
    hello 
</div> 
<footer> 
    this is footer 
</footer>

CSS:

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
header { 
    width: 100%; 
    height: 60px; 
    background: green; 
    position: fixed; 
    top: 0; 
} 
#content { 
width: 100%; 
    height: 100%; 
    background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg"); 
    background-size: 100%; 
} 
footer { 
    width: 100%; 
    height: 60px; 
    background: blue; 
    position: fixed; 
    bottom: 0; 
}

Вот скрипку: http://jsfiddle.net/harshulpandav/7S4Xx/214/

источник

2014-12-08 05:01:57

Изображение в полный размер - Комната для нижнего колонтитула

ответ

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