CSS 100% Height, and then Scroll DIV not page

2019-01-13 07:23发布

站内问答 / HTML/CSS
1923 6 6

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

标签： html css scroll
举报
6条回答
我想做一个坏孩纸
2楼-- · 2019-01-13 07:42

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>

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
3楼-- · 2019-01-13 07:46

make overflow:auto for the div

查看更多
0人赞 添加讨论(0) 举报
一夜七次
4楼-- · 2019-01-13 07:58

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>
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
5楼-- · 2019-01-13 07:59

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.

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
6楼-- · 2019-01-13 08:01 
<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.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
7楼-- · 2019-01-13 08:02

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();
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)