DIV, прикрепленный к нижней части Viewport

Question

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

В: http://s222894377.onlinehome.us/

Вы можете увидеть, есть изображение растягивается на 100% в DIV я создал и прилагается. DIV над ним установлен на высоту: 100%;

Но это занимает слишком много вертикального пространства, и я пытаюсь компенсировать его влияние на общую высоту.

Структура:

Я пробовал вариации на установление отрицательных полей к верхнего и нижнего полей и заполнения для компенсации высоты заголовка, но не понял его еще ,

Если у кого-то есть предложения - он был бы очень признателен.

Спасибо заранее,

мм

Answer 1

Если вы пытаетесь прикрепить что-то в нижней части окна браузера и держать его там, может быть, вы могли бы быть заинтересованы в CSS position: атрибут?

http://www.w3schools.com/Css/css_positioning.asp

В частности, position: fixed;, а затем указать bottom: 0; прикрепить дно что-то в нижней части браузера.

Answer 2

Я не уверен, если я правильно читал вашу проблему, но единственное, что приходит на ум, чтобы использовать что-то вроде:

div#content_block 
{position: absolute; 
top: 3em; /* basically this is 0 + vertical-height of the header; adjust to taste */ 
left: 0; /* assuming you want the div to stretch across the viewport */ 
right: 0; 
bottom: 3em; /* 0 + vertical-height of footer */ 
overflow: auto; 
} 

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

Есть ли вероятность, что вы могли бы разместить (или ссылку) изображение, которое описывает ваш намеченный макет? С добавлением соответствующих полей и дополнений? Кроме того, размещение кода было бы хорошей идеей (css и html).

Answer 3

Я думаю, что вы столкнетесь с проблемами, если попытаетесь указать высоту на верхнем div. Это становится сложным и беспорядочным, чтобы сделать это таким образом.

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

На верхнюю часть содержимого DIV, не установить высоту; но сделать установить нижнее дополнение на 100 пикселей или некоторое значение, которое позволяет нижнему div отображать его полный контент без перекрытия. Таким образом, ваш основной контент будет работать нормально и займет столько же места, сколько потребуется, но ему не будет мешать нижний div.