Содержимое div высота, превышающая высоту страницы

У меня проблема, когда высота раздела «content body» (ниже) превышает нижнюю часть страницы (и за нижним колонтитулом страницы). Я хочу, чтобы этот div прокручивался, когда есть длинный контент, который он делает сейчас, но он не прокручивается до нижней части div, поскольку он находится за пределами страницы. Я не уверен, что вызывает проблему? Вот пример: http://jsfiddle.net/Gg6qY/Содержимое div высота, превышающая высоту страницы

CSS:

html, body { 
    height:100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 
header { 
    position: fixed; 
    width: 100%; 
    background: #006f3b; 
    color: #fff; 
    top: 0; 
    height: 60px; 
    padding: 10px; 
} 
#content { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    padding: 60px 0 20px 0; 
    /* Header height and footer height */ 
    margin: 0 auto; 
    /* Center content */ 
} 
#sidebar { 
    position: absolute; 
    background: #191919; 
    color: #fff; 
    left: 0; 
    top: 60px; 
    bottom: 0; 
    width: 220px; 
    padding: 10px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#contentHeader { 
    position: relative; 
    left: 220px; 
    z-index: 100; 
    padding: 10px; 
    background: #fff; 
    border-bottom: 1px solid #191919; 
    -webkit-box-shadow: 3px 3px 3px #888888; 
    -ms-box-shadow: 3px 3px 3px #888888; 
    box-shadow: 3px 3px 3px #888888; 
} 
#contentBody { 
    position: relative; 
    background: #fff; 
    height: 100%; 
    margin-left: 220px; 
    padding: 0 10px; 
    overflow-y: scroll; 
} 
footer { 
    position: fixed; 
    width: 100%; 
    background: #999; 
    color: #000; 
    bottom: 0; 
    height: 20px; 
    text-align: center; 
}

HTML:

<body> 
    <header>The header</header> 
    <div id="content"> 
     <div id="sidebar">The Sidebar</div> 
     <div id="contentHeader">The Content Header</div> 
     <div id="contentBody"> 
      <p>The Content Body</p> 
     </div> 
    </div> 
    <footer>The Footer</footer>

Спасибо!

источник

2013-09-04 imw

тело и #content, выходит за рамки размера окна, как высота: 100% означает высоту области содержимого тела, которое, если вы добавляете в верхний и нижний отступы, выходит за пределы окна. используйте box-sizing:border-box, чтобы исправить это.

contentBody для расширения до максимально возможной высоты, сделать его абсолютным и установить сверху и снизу.

contentBody также должен идеально работать с высотой 100%. Не проверял.

обновлена скрипка:

http://jsfiddle.net/GaYf4/1/

источник

2013-09-04 02:52:45

Спасибо, отлично работает! – imw

Не знаете, какова ваша цель, но я думаю, что это то, что вы ищете.

html{ 
    min-height: 100%; 
} 
html, body { 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
} 
body 
{ 
    height: 100%; 
}

источник

2013-09-04 02:30:26 BentOnCoding

Извините, я должен был сказать. По сути, мне бы хотелось, чтобы «тело содержимого» прокручивалось - что он делает сейчас - проблема, с которой я сталкиваюсь, заключается в том, что вы не можете прокручивать нижнюю часть div, это находится за пределами нижней части страницы. – imw

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

html, body { 
    height:100%; 
    margin: 0px; 
} 
header { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    background: #006f3b; 
    color: #fff; 
    top: 0px; 
    height: 60px; 
    padding: 10px; 
} 
#content { 
    position: absolute; 
    top: 60px; 
    left: 0px; 
    bottom: 0px; 
    width: 100%; 
} 
#sidebar { 
    position: absolute; 
    background: #191919; 
    color: #fff; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    width: 200px; 
    padding: 10px; 
} 
#contentHeader { 
    position: absolute; 
    top: 0px; 
    left: 220px;  
    height: 15px; 
    padding: 10px; 
    z-index: 2; 
    background: #fff; 
    right: 0px; 
    border-bottom: 1px solid #191919; 
    -webkit-box-shadow: 3px 3px 3px #888888; 
    -ms-box-shadow: 3px 3px 3px #888888; 
    box-shadow: 3px 3px 3px #888888; 
} 
#contentBody { 
    position: absolute; 
    padding: 10px; 
    background: #fff; 
    left: 220px; 
    top: 38px; 
    bottom: 20px; 
    right: 0px;   
    overflow: auto; 
} 
footer { 
    position: fixed; 
    left: 0px; 
    width: 100%; 
    background: #999; 
    color: #000; 
    bottom: 0; 
    height: 20px; 
    text-align: center; 
}

источник

2013-09-04 02:59:33 dano

работал над IE и FF ... использовал тот же код html, который у вас был, я автоматически переключил тело контента на переполнение. Но я заполнил его текстом, и он переполнен правильно, не переходя в нижний колонтитул ... Надеюсь, это поможет! – dano

Спасибо, это тоже работает. Я ценю советы! – imw

Содержимое div высота, превышающая высоту страницы

ответ

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