wake-up-neo.com

CSS 100% Height und dann Scroll DIV nicht Seite

Okay, also konnte ich noch keine Frage mit einer Antwort finden, also entschied ich mich, meine eigene zu machen. 

Ich versuche, ein 100% fließendes Layout zu erstellen, was ich technisch gemacht habe . http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

ABER, was ich jetzt tun möchte, ist, die Seite in HEIGHT 100% zu machen ... Aber ich möchte nicht, dass die Seite einen Bildlauf durchführt. Ich möchte, dass das innere DIV einen Bildlauf durchführt. 

Ich glaube also, ich möchte die Höhe des Viewport-Bildschirms erkennen, 100% gehen, und dann, wenn der Inhalt länger ist als der Bildschirm, das bestimmte DIV scrollen, NICHT die Seite.

Ich hoffe das macht Sinn. 

Danke im Voraus. Justin 

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

Das sollte es für einen einfachen Fall tun

Ich glaube, das wird in Ihrem Fall funktionieren

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

in diesem Beispiel erhalten Sie eine statische Kopf- und Fußzeile, und der Navigator und der Inhaltsbereich können scrollbar sein.

55
John Hartsock

Dies ist ein anderer Weg, um dies mit allen abs-Panels zu tun, es wird auf IE6 fehlschlagen, aber ich kann die Umgehungs-CSS für IE6 bereitstellen, wenn dies eine Voraussetzung ist:

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

overflow:auto für das div machen

6
Mahesh Velaga

overflow: auto; im DIV-Stil Sie sollten nur wissen, dass die Größe des div erhöht werden sollte, damit darin Schriftrollen angezeigt werden können. Wenn Sie die Größe der Seite erhöhen, sollte dies mit style = sein "overflow: hidden;" am Körper) es funktioniert nicht.

2

Sie können dies versuchen:

<!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;'>
	<div class='bg' style='position:static'></div>
	<div class='modal' style='display:none'></div>
	<button class='btn'>toggle </button>
</body>
<script>
	var str='',count=200;
	while(count--){
		str+=count+'<br>';
	}
	var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
	btn=document.querySelector('.btn'),body=document.querySelector('body');
	modal.innerHTML=str;
	btn.onclick=function(){
		if(bg.style.position=='fixed'){
			bg.style.position='static';
			window.scrollTo(0,bg.storeTop);
		}else{
			let top=bg.storeTop=body.scrollTop;
			bg.style.position='fixed';
			bg.style.top=(0-top)+'px';
		}
		modal.style.display=modal.style.display=='none'?'block':'none';
	}
</script>
</html>

0
詹特维

Wenn Sie position: absolute nicht verwenden möchten (da der Ausdruck dadurch beeinträchtigt wird, dass Ihre Ränder von allen Nullen abweichen müssen), können Sie dies mit etwas JavaScript tun.

Richten Sie Ihren Körper und Ihr div so ein, damit das div scrollen kann:

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

Diese Technik hängt davon ab, ob das div eine festgelegte Höhe hat, und dazu benötigen wir JavaScript.

Erstellen Sie eine einfache Funktion, um die Höhe Ihres scrollbaren Div zurückzusetzen

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

Rufen Sie dann diese Funktion sowohl beim Laden der Seite als auch beim Ändern der Größe auf.

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

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