Фиксированный верхний/нижний колонтитул + высота содержимого 100% вызывает нежелательную вертикальную прокрутку

Question

Я пытаюсь создать горизонтальный прокручиваемый веб-сайт с фиксированным верхним и нижним колонтитулом.

Цель: 1. Фиксированных Колонтитулов 2. Нет вертикальную прокрутку 3. Содержание DIV заполняет все пространство между Колонтитулами

я использовал позицию: абсолютную по содержанию, чтобы убедиться, что высота: 100% занимает область между заголовком и нижним колонтитулом. (мой третий гол) Однако это также приводит к появлению вертикальной полосы прокрутки.

демо: http://jsfiddle.net/wQ2XR/230/

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

благодарит заранее!

HTML-код:

<div id="total"> 
     <header id="1"> 
      <div id="a"> 
        <h1>Header</h1> 

      </div> 
     </header> 

     <div id="2"> 
      <div id="b"> 
       <div id="bb"> 
        <h2>Post Title Example One</h2> 
       <p>hello world! Have you thoroughly searched for an answer before asking your question? </p> 
       </div> 
      </div> 
     </div> 
     <footer id="3"> 
      <div id="c"> 
        <h1>footer</h1> 

      </div> 
     </footer> 
    </div> 

CSS-код:

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

header { 
} 

#a { 
    position: fixed; 
    height: 50px; 
    top: 0; 
    width: 100%; 
    background-color: blue; 
} 

#2 { 
    position: relative; 
    padding: 50px 0 25px 0; 
} 

#b { 
    height: 100%; 
    position: absolute; 
} 

#bb { 
    position: relative; 
    height: 100%; 
    margin: 50px 0 0 0; 
    width: 2000px; 
    background-color: yellow; 
} 

footer { 
} 

#c { 
    position: fixed; 
    height: 25px; 
    bottom: 0; 
    width: 100%; 
    background-color: green; 
} 

Answer 1

Хммм, проблема в том, что обертка (-ы) вокруг вашего содержимого между верхним и нижним колонтитулами занимает верхнюю часть области просмотра с height:100%. Таким образом, когда вы применяете маржу для вертикального смещения этих оболочек содержимого (чтобы заголовок стал видимым), они подталкиваются намного ниже области просмотра (50 пикселей, высота заголовка). В результате вы получаете вертикальную полосу прокрутки, так как обертки содержимого - это как полная высота окна просмотра , так и, сдвинутые вниз - поэтому они не могут поместиться на экране.

Как этого избежать? Ну, если ваш нижний колонтитул и высота заголовка не будут динамическими (т. Е. Вы всегда будете контролировать, насколько высоки они с помощью вашего CSS), вы можете достичь этого довольно простым образом с position:absolute.

Твоя структура слегка модифицирована; Я снял #2 и #b элементов, так как это выглядит, как они были только там, чтобы правильно положение/размер #bb, фактическое содержание содержащего элемент:

<div id="total"> 
    <header id="1"> 
     <div id="a"> 
      <h1>Header</h1> 
     </div> 
    </header> 
    <div id="bb"> 
     <h2>Post Title Example One</h2> 
     <p>hello world! Have you thoroughly searched for an answer before asking your question?</p> 
    </div> 
    <footer id="3"> 
     <div id="c"> 
      <h1>footer</h1> 
     </div> 
    </footer> 
</div> 

Теперь, с помощью CSS, я удалил определения для укладки #2 и #b. Кроме того, я изменил #bb CSS читать как:

#bb { 
    position: absolute; 
    top: 50px; 
    bottom: 25px; 
    width: 2000px; 
    background-color: yellow; 
} 

Вот updated JSFiddle, чтобы продемонстрировать, что это достигается. Кроме того, вот JSFiddle implementing your multiple-row layout, который вы дали в качестве комментария в одном из ответов.

Причина, по которой overflow:hidden не совсем работает, потому что #bb фактически все еще будет находиться под окном просмотра - просто нет вертикальной полосы прокрутки, потому что эта область переполнения игнорируется браузером. Однако, когда вы используете процентную высоту, становится очевидным, что высота #bb не то, что видно. В любом случае, надеюсь, что это поможет! Если это не то, что вы искали, сообщите мне, и я буду рад помочь вам. Удачи!

Answer 2

Чтобы скрыть использование полосы прокрутки:

overflow: hidden; 

Однако текст должен пойти куда-нибудь (в противном случае он будет быть скрытым), поэтому вам нужно иметь контейнер больше или использовать текстовые столбцы.

Вы собираетесь достичь чего-то вроде Windows 8 Metro UI для прокрутки?