静态头+菜单，滚动体

这就是我试图完成：静态头+菜单，滚动体

 
+--------screen-----------------------+ 
|  ______________________  |*| 
|  |_static_header______|  |*| 
|  |    |  |  |*| 
|  | content  |menu |  |*| 
|  | scrollable |static|  |*| 
|  |    |  |  |*| 
|  |    |  |  |*| 
|  |    |  |  |*| 
+-------------------------------------+

内容是可变的高度，且内容滚动条必须显示在页面主体（而不是它的在区域）。我设法得到了基本的想法，但是当滚动条显示时我无法获得内容div的正确位置，即使我设置为始终显示滚动条，我也无法使用固定宽度，因为它们从浏览器到浏览器不同。

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> 
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"> 
     Header 
    </div> 
</div> 

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's --> 
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;"> 
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;"> 
     <div style="background-color:Orange; width:100%; height:900px;"> 
      Content 
     </div> 
    </div> 
</div> 

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;"> 
    <div style="width:500px; float:left;"> 
     <div style="background-color:Green; float:right; width:200px; "> 
      Menu 
     </div>    
    </div> 
</div>

在内容上面的代码是关闭的滚动条的宽度，我怎样才能得到它与页面的休息权（即计算是不考虑滚动条的宽度，即使它有一个位置）？

来源

2011-03-04 Danicco

1 ASCII图形。它总是很高兴看到来自SO上的新用户的格式良好的问题。 – 2011-03-04 16:49:36

这是固定宽度还是应该跨越整个视口？ – roryf 2011-03-04 17:00:41

整个“身体”（标题，内容+菜单如下）应在固定宽度。当我没有设置固定宽度时，我遇到了问题，因为我没有设置固定宽度... – Danicco 2011-03-04 17:04:12

如果我理解你的问题正确，这将是一个解决方案：http://jsfiddle.net/7pJS8/

来源

2011-03-04 17:19:10 Adam

假设静态标题部分不是一个不变的高度，而是根据情况而变化？是否还有一种只有CSS的方式才能让它下面的内容滚动，而不是整个窗口？ – enigment 2012-12-23 15:52:17

有办法用固定的高度做它，然后使用可滚动区域的溢出属性。然而，这不是一个好的做法，你应该看看的是从jQuery或你选择的JS库中使用粘性标题或滚动标题（随着用户向上和向下滚动的滚动标题）。

来源

2011-03-04 17:09:00 Brian

不position:fixed解决问题了吗？如果您将position:fixed设置为标题和菜单div？

来源

2011-03-04 17:29:46

没错，虽然我依稀记得这不是一个“标准”选项。或者也许是关于背景位置，现在我不确定。我会试试看，谢谢！ – Danicco 2011-03-04 17:50:42

<style> 
body { 
    padding: 0px; 
} 
.container { 
    margin: 0px auto; 
    position: relative; 
    width: 500px; 
} 

#header { 
    left: 0px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index: 1000; 
} 
#header .container { 
    background: blue; 
    height: 100px; 
} 

#content { 
    background: green; 
    height: 1500px; 
    margin-top: 100px; 
} 
#content .inner { 
    margin-right: 200px; 
} 

#sidebar { 
    left: 0px; 
    position: fixed; 
    top: 100px; 
    width: 100%; 
    z-index: 1000; 
} 
#sidebar .inner { 
    background: red; 
    height: 200px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 200px; 
} 
</style> 

<div id="header"> 
    <div class="container"> 
     header 
    </div> 
</div> 
<div id="content" class="container"> 
    <div class="inner"> 
     content 
    </div> 
</div> 
<div id="sidebar"> 
    <div class="container"> 
     <div class="inner"> 
      sidebar 
     </div> 
    </div> 
</div>

可能的解决办法：http://jsfiddle.net/zWERN/

来源

2011-03-04 17:31:06 roryf

设置上的所有网页的滚动，可能会导致消失的标题和菜单 - 若为长。

你在找什么是Holy Grail design的子集。

Here的使用柔性显示器的实施方式：

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <!-- No need for 'flex-direction: row' because it's the default value --> 
    <div style="display: flex; flex: 1"> 
     <div>NAV|</div> 
     <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
     </div> 
     <div>|SIDE</div> 
    </div> 
    <div>------------<br/>FOOTER</div> 
    </body> 
</html>

来源

2015-10-23 07:25:29

静态头+菜单，滚动体

回答

相关问题