Вопросы Теги

CSS 100% высотой, и затем Прокрутка DIV не страница

Хорошо, таким образом, я не смог найти вопрос с ответом все же, таким образом, я решил сделать свое собственное.

Я пытаюсь создать 100%-е жидкое расположение, которое технически я сделал. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

НО, то, что я хочу сделать теперь, должно сделать страницу 100% в ВЫСОТЕ... Но я не хочу, чтобы страница прокрутила, я хочу, чтобы внутренний DIV прокрутил.

Таким образом, я верю короче говоря, что я хочу, чтобы это обнаружило высоту экрана области просмотра, пойдите 100%, и затем ЕСЛИ содержание длиннее затем экран, прокрутите определенный DIV, НЕ страницу.

Я надеюсь, что это имеет смысл.

Заранее спасибо. Justin

50
задан Azoulay Jason 4 January 2018 в 02:09
поделиться

4 ответа

<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
    </div>
  </body>
</html>

Это должно сработать для простого случая

Я считаю, что это сработает для вашего случая 

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

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

59
ответ дан 7 November 2019 в 11:01
поделиться

overflow: auto; в стиле DIV Вы должны просто знать, что размер div должен увеличиваться, чтобы в нем могли отображаться прокрутки. Если вы увеличите размер размер страницы (который должен быть с style = "overflow: hidden;" в теле) работать не будет.

2
ответ дан 7 November 2019 в 11:01
поделиться

Это другой способ сделать это со всеми панелями abs, он не работает в IE6, но я могу предоставить CSS обходной путь для IE6, если это требование: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Fluid Layout</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
    body { background-color:black; margin:0px; padding:0px; }
    .pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
    .headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
    .contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
    .footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }        
    .contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
    .contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }    
    .contentBoxLeft,
    .contentBoxRight { overflow:auto; overflow-x:hidden; }
 </style>
 </head>
<body>&nbsp;
    <div class="pageBox">
        <div class="headerBox">Header</div>
        <div class="contentBox">
            <div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
            <div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
        </div>
        <div class="footerBox">Footer</div>
    </div>
</body>
</html>
9
ответ дан 7 November 2019 в 11:01
поделиться

make overflow: auto для div

6
ответ дан 7 November 2019 в 11:01
поделиться