Как сделать заголовок DIV на 100%, но все же разрешить вертикальную прокрутку?

Question

После поиска нескольких решений здесь кажется, что у всех есть противоположная проблема, с которой я сталкиваюсь (ха!). Вот что я пытаюсь выполнить: у меня есть DIV, что при загрузке страницы составляет 100% ширины и 100% высоты. Это так, что без размера экрана мы всегда получаем полный образ главной страницы. Однако мы хотим иметь возможность прокручивать ниже, что для дополнительного контента. Я нахожусь в точке, где я подстроил ее, чтобы немного поработать, но это глючит. Вот HTML:

<div id="ScalableImage"></div> 
<div id="BlockWhite" style="height:1000px"></div> 
<div id="BlockBlue1" style="height:300px"></div> 
<div id="BlockBlue2" style="height:50px"></div> 

Здесь вы можете увидеть, что «BlockWhite» имеет высоту 1000 пикселей. Это потому, что он скрыт за «ScalableImage». Я не могу заставить его гнездиться ниже !!!

В любом случае, вот CSS для ScalableImage и цветные блоки ::

#ScalableImage { 
position: absolute; 
display:block; 
top:0; 
left:0; 
width:100%; 
height:100%; 
max-height:900px; 
background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
z-index:700; 
    } 

#BlockBlue1 { 
position:relative; 
float:left; 
background-color:#c5d1d1; 
width:110%; 
margin-left:-10px; 
margin-bottom:-10px; 
min-height:20px; 
clear:both; 
} 
#BlockBlue2 { 
position:relative; 
float:left; 
background-color:#95aab2; 
width:110%; 
min-height:20px; 
margin-left:-10px; 
margin-bottom:-10px; 
clear:both; 
} 

#BlockWhite { 
position:relative; 
float:left; 
background-color: #fff; 
width:110%; 
min-height:20px; 
margin-left:-10px; 
margin-bottom:-10px; 
clear:both; 
} 

Идеи?

Спасибо!

Answer 1

Причина, по которой «#ScalableImage» перекрывается «# BlockBlue1», заключается в том, что у вас есть position: absolute в вашем стиле «#ScalableImage» - поэтому он вытягивается из макета и, как таковой, покрывает другие элементы.

Чтобы добиться того, что (я думаю), что вы ищете, вы можете удалить, что position:absolute стиль, а затем добавить:

body, html{ 
    height:100%; 
    margin:0; 
} 

(0 маржа только в случае, если браузер делает тело/html элементы с запасом.)

Надеюсь, это будет полезно для вас. Удачи!

(Edit) Добавлен JSFiddle, чтобы показать вам, что я вижу: http://jsfiddle.net/BDd62/

(Edit 2) Просмотрев свой дополнительный код, я думаю, что я определил причину этого белого пространства. Это из-за вашего верхнего края на «#htxt», который фактически перемещает свой родительский элемент в этом случае. (Вы можете прочитать более подробное объяснение того, что это происходит here. Вы можете избежать этого несколькими способами, но здесь представлены измененные области в вашем CSS, которые я сделал. Если это не макет, который вы хотели, я знаю:

#bg { 
    display:block; 
    width:100%; 
    height:100%; 
    max-height:900px; 
    background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index:700; 
} 
#htxt { 
    position:relative; 
    font-family: 'Raleway'; 
    font-weight:bold; 
    font-size: 6em; 
    text-align:center; 
    color:#FFF; 
    width:80%; 
    max-width:960px; 
    line-height:100px; 
    margin:0 auto 22%; 
    padding:22% 0 0; 
    z-index:800; 
} 
#hsubtxt { 
    position:relative; 
    font-family: 'Raleway'; 
    font-size: 3em; 
    text-align:center; 
    color:#FFF; 
    width:80%; 
    margin:2% auto 0; 
    z-index:800; 
} 

Надеется, что это поможет вам Вот вашему updated JSFiddle, чтобы увидеть полный код, но я предлагаю запустить его в полном браузере (так как ваш макет не оптимизирован для маленького размера окна в JSFiddle Окружающая среда