logo标签列表

CSS 100%高度，然后滚动DIV而不是页面

htmlcssscroll
57

好的，我还没有找到一个带有答案的问题，所以我决定自己创建一个。

我正在尝试创建一个100%流体布局，从技术上讲我已经做到了。 http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

但是，现在我想做的是让页面的高度达到100%……但我不想让页面滚动，我想让内部DIV滚动。

因此，简要地说，我希望它能检测视口屏幕的高度，达到100%，然后如果内容超过了屏幕，滚动特定的DIV，而不是整个页面。

我希望这样说得清楚。

6个回答
67
<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>

这个例子可以帮助你实现固定的页头和页脚，并让导航栏和内容区域可滚动。

John，你的第二个例子非常好用！非常感谢，我已经为此烦恼了很长时间。非常感激。 - Justin
由于某些原因，在IE8中对我不起作用，可能是JQuery CSS的问题。 - Eran Medan
9

这是一种用所有绝对定位面板进行操作的不同方式，它在IE6上会失败，但如果需要，我可以提供IE6的解决方案CSS：

<!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>
1
David，太棒了，你是第一个真正使用我提供的信息的人，感谢你展示实现。非常感谢，非常有用。 - Justin
6
使
元素的滚动条自动出现：overflow:auto。
2

overflow:auto; 在DIV样式上 你只需要知道div的大小应该增加，这样它就可以显示滚动条。 如果您增加页面的大小（应该是在body上使用style="overflow: hidden;"），那么它将无法工作。

1
如果您不想使用position:absolute（因为如果您的边距需要与所有零不同，则会破坏打印输出），那么您可以使用一点JavaScript来完成。
像这样设置您的body和div，以允许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();
}
这是唯一一个解决主要问题的方案，即具有 height: 100%。然而，它不需要 JS，只需要在所有祖先元素上设置正确的高度到 html。设置 overflow 只需要在滚动容器上，而不是任何祖先元素上。 - Brandon Hill
0
您可以尝试这个： 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接