CSS 100% Высота, а затем прокрутка DIV не страница

Итак, я еще не смог найти вопрос с ответом, поэтому решил сделать свой собственный.CSS 100% Высота, а затем прокрутка DIV не страница

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

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

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

Надеюсь, это имеет смысл.

Заранее спасибо. Джастин

источник

2010-04-28 Justin

Вероятно, лучше спрашивать у DocType: http://doctype.com/ – teabot

<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>

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

источник

2010-04-28 17:00:54

Джон, ваш второй пример работал удивительный! Огромное вам спасибо, я очень долго общался с этим. Ценить это. – Justin

Не проблема. Рад помочь –

Не работает для меня в IE8 по какой-то причине, возможно, JQuery CSS –

делают overflow:auto для DIV

источник

2010-04-28 16:56:56

переполнение: авто; в стиле DIV Вы должны просто знать, что размер div должен увеличиваться, чтобы он мог показывать свитки. Если вы увеличиваете размер страницы (что должно быть со стилем = «переполнение: скрыто;» на корпусе) это не сработает.

источник

2010-04-28 17:06:22

Пожалуйста, отредактируйте этот ответ, чтобы сделать его чуть более удобочитаемый. Затем положите его поверх книги «Секретные советы о причудливом дерьме от истинных CSS-ниндзя» – Zlatko

Это другой способ сделать это со всеми абс панели, она не будет выполнена в 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>

источник

2010-04-28 17:21:13 David

Дэвид, Удивительный бутон, ваш первый, кто фактически использовал информацию, которую я дал, оценил, что вы показываете реализацию. Спасибо, был очень полезен. – Justin

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

Настройка вашего тела и DIV, как так, чтобы позволить ДИВ прокручивать:

<body style='overflow:hidden'> 
    <div id=scrollablediv style='overflow-y:auto;height:100%'> 
    Scrollable content goes here 
    </div> 
</body>

Этот метод зависит от DIV, имеющего заданную высоту, и для этого нам требуется JavaScript.

Создать простую функцию, чтобы сбросить высоту вашего прокруткой DIV

function calculateDivHeight(){ 
    $("#scrollablediv").height(window.innerHeight); 
}

И затем вызвать эту функцию как на странице загрузки и изменения размера.

// Gets called when the page loads 
calculateDivHeight(); 

// Bind calculate height function to window resize 
$(window).resize(function() { 
    calculateDivHeight(); 
}

источник

2016-06-14 23:16:10 Vincent

Вы можете попробовать это:

<!DOCTYPE> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
 
<style rel="stylesheet" type="text/css"> 
 
    .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;} 
 
    .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;} 
 
    .btn{position:fixed;top:100px;left:100px;} 
 
</style> 
 
</head> 
 
<body style='padding:0px;margin:0px;'> 
 
\t <div class='bg' style='position:static'></div> 
 
\t <div class='modal' style='display:none'></div> 
 
\t <button class='btn'>toggle </button> 
 
</body> 
 
<script> 
 
\t var str='',count=200; 
 
\t while(count--){ 
 
\t \t str+=count+'<br>'; 
 
\t } 
 
\t var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'), 
 
\t btn=document.querySelector('.btn'),body=document.querySelector('body'); 
 
\t modal.innerHTML=str; 
 
\t btn.onclick=function(){ 
 
\t \t if(bg.style.position=='fixed'){ 
 
\t \t \t bg.style.position='static'; 
 
\t \t \t window.scrollTo(0,bg.storeTop); 
 
\t \t }else{ 
 
\t \t \t let top=bg.storeTop=body.scrollTop; 
 
\t \t \t bg.style.position='fixed'; 
 
\t \t \t bg.style.top=(0-top)+'px'; 
 
\t \t } 
 
\t \t modal.style.display=modal.style.display=='none'?'block':'none'; 
 
\t } 
 
</script> 
 
</html>

источник

2017-02-27 14:00:22

CSS 100% Высота, а затем прокрутка DIV не страница

ответ

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