可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.

I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.

So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.

I hope this makes sense.

Thanks in advance. Justin

回答1:

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

That should do it for a simple case

I believe this will work for your case

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

this example will give you a static header and footer and allow the navigator and content area to be scrollable.

回答2:

This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:

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

回答3:

make overflow:auto for the div

回答4:

overflow:auto; on the DIV style You should just know that the size of the div should increase so it can show scrolls in it. If you increase the page's size (which should be with style="overflow: hidden;" on the body) it won't work.

回答5:

If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.

Set up your body and div like so to allow the div to scroll:

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

This technique depends on the div having a set height, and for that we require JavaScript.

Create a simple function to reset the height of your scrollable div

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

And then call this function on both page load and on resize.

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

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

回答6:

You can try this:

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