Установка фона на 100% высоты и нижний колонтитул внизу страницы

Я знаю, что этот вопрос задавался много раз, но ни один из ответов не разрешил мою ситуацию. Это демо http://jsfiddle.net/eyuxt3zz/18/, для которого мне нужно, чтобы фоновое изображение div #marketing_logo было распространено на 100% и касалось нижнего колонтитула. Если я установил div #content на 100%, используя dispaly:absolute, нижний колонтитул не сохранит его нижнее положение. Я попробовал некоторое решение, но не могу понять, как сохранить нижний колонтитул внизу страницы, когда другой div также установлен в position: absolute.Установка фона на 100% высоты и нижний колонтитул внизу страницы

Высота для фона теперь установлена равной 300 px, чтобы содержимое div не было пустым.

Итак, вопрос заключается в том, как сделать #marketing_logo div фоном размером 100% и поддерживать нижний нижний нижний нижний нижний колонтитул. Diver нижнего колонтитула устанавливается в положение абсолютное, так что оно всегда остается в нижней части страницы.

Спасибо!

демо http://jsfiddle.net/eyuxt3zz/18/

HTML код

<body> 
    <div id="page" class="pageContainer"> 
     <div class="ppContainer"> 
      <div id="container"> 
       <div id="marketing_logo"></div> 
      </div> 
     </div> 
     <div id="footer">Footer</div> 
    </div> 
</body>

CSS код

html, body { 
    height:100%; 
    margin: 0; 
} 
.pageContainer { 
    min-height: 100%; 
} 
#marketing_logo { 
    background: url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:300px 
} 
#footer { 
    width: 100%; 
    height: 100px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    background: #BBBBBB; 
    text-align: left; 
    padding-top: 10px; 
}

источник

2015-08-23 sorin

Вопросы, требующие помощи по коду, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. Хотя вы указали ссылку на пример, если ссылка стала недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. –

JsFiddle немного сломан, я думаю. У вас есть «содержание» в вашем CSS, но ни один элемент с содержимым «id =» «в вашем HTML» –

Попробуйте это:

#marketing_logo { 
    background: url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0 -15px -150px -15px; 
    width: 100%; 
     height: 100%; 
     top: 0px; 
     left: 0px; 
     position: fixed; 
}

источник

2015-08-23 11:08:20 JSB

Вот пример, я не уверен, что это то, что вы смотрите для? Example codepen

body,html{ 
height:100%; 
} 

#wrapper{ 
min-height:100%; 
height:auto !important; 
height:100%; 
margin:0 auto -150px; /* minus the height of the footer */ 
} 

#marketing_logo{ 
background: url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat center center; 
height:100vh; 
width:100%; 
background-size:100%; 
} 

#push, footer{ 
height:150px; /* height of the footer */ 
clear:both; 
} 

footer{ 
background:#BBBBBB; 
}

источник

2015-08-23 11:12:56 krunos

Я бы разрешил это с помощью JavaScript/jQuery. Вот ваш обновленный JSFiddle.

JavaScript код:

$(document).ready(function() { 
    // Calculate heigth 
    function calcHeight() { 
     var height = $(window).height() - $('#footer').height(); 
     $('#marketing_logo').css('height', height); 
    } 
    // Auto call calcHeight on page load 
    calcHeight(); 

    // Call calcHeight when the browser window resizes 
    $(window).resize(calcHeight); 
});

Я создал небольшую функцию под названием calcHeight. Я вызываю эту функцию при загрузке страницы и когда пользователь изменяет размер окна. Внутри этой функции я вычисляю высоту нижнего колонтитула и оставшуюся высоту (высоту окна - высоту нижнего колонтитула), чтобы обновить высоту вашего marketing_logo.

источник

2015-08-23 11:16:32

Установка фона на 100% высоты и нижний колонтитул внизу страницы

ответ

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