如何使用div/css创建两帧水平平铺框架集的行为？

我试图制定出一个网页是这样的：如何使用div/css创建两帧水平平铺框架集的行为？

|-----------------------| 
| header (fixed)  | <- no scroll bar 
|-----------------------| 
| body    | | 
|      | | 
|      | | <- scroll bar 
|      | | 
|      | | 
|      | | 
|      | | 
| ... continues ... | | 
| ... so requires ... | | 
| ... scroll bar ... | | 
|---------------------|-|

在旧旧的日子里，我想有一个框架做到了这一点。我不想因为几个原因走这条路线（包括它被弃用）。

在不那么古老的日子里，我想我已经做了这个使用高度= 100％的表，两行作为整个页面的主体，溢出风格设置隐藏/自动在不同的地方得到最下面一行是主页面内容的滚动条。我可以用这个解决方案，但我不记得如何正确设置它（我很确定它涉及到将正确的页面元素设置为定位：相对或其他东西，但我一直在撞我的头在键盘上两个小时试图让它工作，所以我放弃了）。

我读过声称，任何你可以用帧/表你可以用正确的div和css做的事，所以我真的很想看到有人告诉我，解决方案。

另外请注意：我只希望需要基于内容时滚动条显示（根据溢出：自动）无时无刻不在（溢出：滚动）。

来源

2011-12-31 Chuck Wilbur

答案就在你的ASCII艺术图。 – BoltClock 2011-12-31 05:59:06

这是一个完全可行的解决方案，用于在绝对定位的标题下浏览问题的滚动内容，而浏览器窗口上没有其他滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Scrollable 100% high element</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
p{margin:0 0 1em 0} 
html,body{margin:0;padding:0} 
body{ 
    height:100%; 
} 
html>body{ 
    position:absolute; 
    width:100%; 
} 
#content{ 
    background:#d2da9c; 
    overflow:auto; 
    position:absolute; 
    width:100%; 

    left:0; 
    top:100px; 
    bottom:0; 
} 

#top{ 
    position:absolute; 
    left:0; 
    width:100%; 
    top:0px; 
    height:100px; 
    background:red; 
    overflow:hidden; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="content"> 
     <p>Start</p> 
     <p>test</p> 
     <p>test</p> 
    </div> 
</div> 
<div id="top"> 
    <h1>Header</h1> 
</div> 
</body> 
</html>

来源

2011-12-31 06:41:46 MadScientist

去与这个（没有“包装”的div我的猜测是从其他的解决办法吃剩的），但理想的解决方案将允许头部区域改变尺寸根据内容而定。我原本以为根据用户在某些动态菜单上的选择，标题需要变得越来越小，但客户对固定大小的解决方案感到满意（并且它可能更好，因为它可以保持内容区域的顶部边缘不会跳来跳去。 ..） – 2011-12-31 22:41:28

这是简单的方式做一个固定的头，当你想要做一个固定的页脚以及它变得有点复杂。这应该适合你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
    body{ 
     margin:0; 
     padding:0; 
     position:relative; 
    } 
    body, html, #wrapper { 
     height:100%; 
     position:relative; 
    } 
    #header{ 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100px; 
     background-color:yellow 
    } 
    #wrapper { 
     height:100%; 
     padding-top:100px; 
    } 
    #content{ 
     overflow:auto; 
     height:100%; 
    } 

    </style> 
    </head> 
    <body> 
    <div id="header"> header </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <p>content </p> 

     </div> 
    </div> 
</body> 
</html>

这个稍微好一点，我们只需要摆脱底部的间距即可完全移除最右侧的滚动条。

来源

2011-12-31 06:02:09 MadScientist

您可以根据需要在内容div上放置边距和填充以放置标题 – MadScientist 2011-12-31 06:02:57

'position：absolute'应显示为'position：fixed'。 – BoltClock 2011-12-31 06:04:51

我尝试了一些与此类似的东西，我认为这会有同样的问题。请注意，在我的ASCII图表中，滚动条停在标题区域的底部。使用绝对定位的标题，滚动条仍然会一直延伸到浏览器窗口，即使它只滚动身体区域。这对于客户（也就是我的妻子）来说是不能接受的;） – 2011-12-31 06:09:49

如何使用div/css创建两帧水平平铺框架集的行为？

回答

相关问题