CSS 100% Height, and then Scroll DIV not page

前端未结

关注

 6  842

一整个雨季

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

相关标签:

6条回答

萌比男神i

2020-12-02 13:23

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)
发布评论:

提交评论
- 加载中...

情深已故

2020-12-02 13:30

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)

北恋

2020-12-02 13:34

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)

谎友^

2020-12-02 13:35

make overflow:auto for the div

0 讨论(0)
发布评论:

提交评论
- 加载中...
眼角桃花

2020-12-02 13:40
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)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2020-12-02 13:49

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