фоновые изображения в области между верхним и нижним колонтитулом

Я делаю страницу, макет которой разделен на 3 раздела: Заголовок, основной корпус и нижний колонтитул. Я хочу фоновое изображение в своем основном теле. Теперь, когда я пытаюсь это сделать, у меня возникла проблема. Изображение не покрывает всю площадь. Он оставляет некоторую область внизу. Проверьте это fiddle для правильного объяснения.фоновые изображения в области между верхним и нижним колонтитулом

Вот что я сделал до сих пор:

HTML

<html> 
    <head> 
     <title>Gehri Route: Login, Signup</title> 
    </head> 
    <body> 
      <div class='headercontainer'> 
         <div class='header'> 
          header 
         </div> 
      </div> 
      <div class='mainbodycontainer'> 
        </div> 
      <div class = 'footercontainer'> 

         <div class='footer'> 
           footer 
         </div> 
      </div> 
     </body> 
</html>

CSS

body 
{ 
    background-color: rgb(250,250,250); 
    margin: 0; 
    padding: 0; 
} 

.headercontainer 
{ 
    background-color: rgb(245,245,245); 
    min-width: 999px; 
    height:60px; 
    border:1px solid #666; 
    left: 0; 
} 

.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    padding: 80px 0; 
     background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


.footercontainer 
{ 
    background-color: rgb(245,245,245); 
    width: 100%; 
    height:82px; 
    border: 1px solid #666; 
    left:0; 
    position: fixed; 
    bottom: 0; 
} 

.header 
{ 
     margin: 0px auto; 
     width: 999px; 
} 



.mainbody 
{ 
    margin: 0px auto; 
    width: 999px; 
}

Кроме того, пожалуйста, помогите мне сделать это адаптивный дизайн.

источник

2013-07-19 user1263375

, возможно, вы хотите заменить oldsql 'div's с некоторыми новыми элементами фантазии html5 как'

'или' '

Вам нужно направить высоту на тело и html-метку на 100%. Если нет содержимого, фон не будет отображаться, потому что высота элемента (.mainbodycontainer) равна 0. В вашем случае это было 80 пикселей, потому что вы применили заполнение.

проверьте эту скрипку. http://jsfiddle.net/olwez/ncLZN/

Я добавил высоту тегов и html-тегов на 100% и минимальную высоту 100% в div .mainbodycontainer. Таким образом, вам не нужно вручную устанавливать высоты или иметь контент в контейнере .mainbodycontainer, чтобы изображение работало по вашему желанию.

Я просто выбросил переполнение: скрыто; на теге тела, чтобы прокрутка не исчезла.

Вот полный css.

html { height: 100% } 
body 
{ 
    background-color: rgb(250,250,250); 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: hidden; 
} 

.headercontainer 
{ 
    background-color: rgb(245,245,245); 
    min-width: 999px; 
    height:60px; 
    border:1px solid #666; 
    left: 0; 
} 

.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    min-height: 100%; 
     background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


.footercontainer 
{ 
    background-color: rgb(245,245,245); 
    width: 100%; 
    height:82px; 
    border: 1px solid #666; 
    left:0; 
    position: fixed; 
    bottom: 0; 
} 

.header 
{ 
     margin: 0px auto; 
     width: 999px; 
} 



.mainbody 
{ 
    margin: 0px auto; 
    width: 999px; 
}

источник

2013-07-19 17:03:20

+1 для поиска предмета переполнения. Я искал причину прокрутки. – user1263375

Я пробовал это на своем ipad, но это дало мне вертикальную прокрутку, которую я не хочу. Как удалить вертикальный свиток? – user1263375

У вас есть минимальная ширина и множество других ширины с определенными значениями, например 999px. Это может быть проблема с переводом в ландшафт. Попробуйте изменить их на% 100 или% в целом. Трудно мне сейчас проверить. –

добавить это к вашему стилю:

width:600px; 
    height:450px; 


.mainbodycontainer 
{ 
    margin: 0 auto; 
    overflow: auto; 
    background-color: rgb(250,250,250); 
    min-width: 999px; 
    padding: 80px 0; 
    background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:600px; 
    height:450px;

}

http://jsfiddle.net/QcUfm/9/

источник

2013-07-19 16:54:58 Keith

фиксируя Hight не является хорошей идеей, если он хочет, чтобы добавить больше вещей, больше чем 450 пикселей, это не сработает. использование% лучше, чем @olwez. – AliBZ

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

источник

2013-07-19 16:57:04

фоновые изображения в области между верхним и нижним колонтитулом

ответ

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