100% фон плитка, на 100% высоты divs

У меня проблема с макетом, который я пытаюсь разработать. Я в основном разделил порт представления на 2 равных ширины divs с различным фоном, черепичным изображением в каждом.100% фон плитка, на 100% высоты divs

У меня есть растяжка на весь экран 100%, но проблема при прокрутке.

Фоновое изображение обрезано до первоначальной высоты порта просмотра.!

Вот HTML:

<body> 

<div id="container"> 

     <div id="left" class="half"> 
     left content here 
     </div> 

     <div id="right" class="half"> 
      right content here 
     </div> 
</div> 

</body>

Вот CSS:

html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
    color: #505050; 
} 

div#container { 
    height: 100%; 
    min-width: 800px; 
    min-height: 500px; 
} 

div.half { 
    height: 100%; 
    width: 50%; 
} 

div.half#left { 
    float: left; 
    text-shadow: 0px 1px 1px white; 
    background-image: url(images/metalBG.jpg); 
} 

div.half#right { 
    float: right; 
    text-shadow: 0px -1px 1px black; 
    background-image: url(images/fabricBG.jpg); 
}

мне интересно, если это возможно, JavaScript, следовательно, включены в эту кошку тоже.

источник

2010-09-29 Doobox

Если я вспоминаю, используя высоту 100% под телом будет оказывать DIV как высоту размера окна браузера. Так как он не идет под сгибом, при прокрутке изображение останавливается на 100% высоты окна. Я нахожусь на пути, поэтому у меня недостаточно времени, чтобы дать полный ответ, но это может помочь вам в ваших поисках. – cm2

Да при ближайшем рассмотрении это похоже на происходящее. – Doobox

Итак, есть ли способ, чтобы левая и правая divs держали там 100% высоты при прокрутке. Я предполагаю, что это будет включать javascript. – Doobox

Я бы использовал Firebug или аналогичный, чтобы убедиться, что это проблема с фоном, а не проблема с размерами DIV. Возможно, то, что обрезано, не ваше изображение BG, а высота ваших DIV.

Если это не так, то вы можете попробовать добавить

background-repeat:repeat,

на ваш CSS для div.half, но это уже значение по умолчанию, так что если у вас есть некоторые CSS где-то перекрывая его, должно быть на месте так или иначе.

источник

2010-09-29 12:52:14 levik

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

html { 
    margin:0; 
    padding:0; 
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
    color: #505050; 
    background-image: url(images/metalBG.jpg); 
} 

body { 
    float:right; 
    margin:0; 
    padding:0; 
    width:50%; 
    background-image: url(images/fabricBG.jpg); 
} 

#left { 
    float:left; 
    margin-left:-600px; 
    width:550px; 
}

источник

2010-09-29 14:45:04 Doobox

Изменение ширины и положения тела - интересный подход, которого я раньше не видел :) Просто будьте осторожны относительно размера окна; учитывая, что ваша маржа похожа на ее использование пикселей (хотя это может быть то, что вы ищете)? – cm2

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

.half{ 
    position:fixed; /* keeps the divs in the same place */ 
    overflow:auto; /* overflowing content will scroll */ 
    background-attachment:fixed; /* the background won't scroll with content */ 
}

источник

2010-09-30 00:47:27 cm2

100% фон плитка, на 100% высоты divs

ответ

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