如何创建这样

分隔膜的HTML页面，我想创建一个网页，它看起来像这样： http://i.imgur.com/HVKRB.png 如何创建这样

我不能使用（我会在网站上使用AJAX如此多帧因为一页上的内容会影响其他人，所以最干净的方式是什么？

一个类似的网站是谷歌阅读器，我是一个HTML和I我不知道他们是如何做到的。

编辑：部分应占据整个眉头ser窗口（所以没有在页面上滚动，只是个别部分。 Google Reader就是一个很好的例子。谢谢:)

来源

2011-07-26 aerain

这是一个很简单的例子：http://jsfiddle.net/C7eA8/。请注意，在同一元素上使用proentual宽度和边框会出现问题。要获得像素完美的解决方案，请在px中使用宽度或将边框绘制到区域div中的元素。

来源

2011-07-26 06:25:21

啊！精彩！你能告诉我如何包含标题吗？（我更新了上面的图片）。当我尝试这样做时，页面会变得混乱。谢谢！ – aerain

好的，我们去：http://jsfiddle.net/C7eA8/4/ –

太棒了。最后一件事 - 我如何让这些元素占据整个页面？ – aerain

这可以通过使用HTML的framset标签来完成。语法如下：

<frameset cols="25%,*,25%"> 
    <frame src="frame_a.htm" /> 
    <frame src="frame_b.htm" /> 
    <frame src="frame_c.htm" /> 
</frameset>

了解更多关于框架集在这里：http://www.w3schools.com/tags/tag_frameset.asp

编辑：哎呀，忘了你不能使用框架。你应该使用表来实现这一点，但我不会推荐它。您将使用rowspan="2"使第一个单元格跨越页面的整个高度，并在该右上角的单元格上使用colspan="2"。

来源

2011-07-26 05:49:04 Purag

对不起 - 我不想使用帧（见上）或framsets。谢谢！ – aerain

@aerain：对不起，请查看我上面的修改。 – Purag

如果我使用框架，我可以使用Google阅读器这样的滚动条吗？ – aerain

下面是做这件事：

<?DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    * { 
     margin:0px; 
     padding:0px; 
    } 
    .left { 
     float:left; 
     width:20%; 
     height:500px; /* probably want to let content set height, though */ 

     background:#ccc; 
    } 
    .right { 
     width:80%; 
     float:right; 
    } 
    .right .top { 
     height:200px; /* probably want to just let content set height, though... */ 

     background:#00f; 
    } 
    .right .bottom { 
     height:300px; 
    } 
    .right .bottom .bottom-left { 
     float:left; 
     width:20%; 
     height:100%; 

     background:#ddd; 
    } 
    .right .bottom .bottom-right { 
     float:right; 
     width:80%; 
     height:100%; 

     background:#666; 
    } 
</style> 
</head> 
<body> 

<div class="left"></div> 
<div class="right"> 
    <div class="top"></div> 
    <div class="bottom"> 
     <div class="bottom-left"></div> 
     <div class="bottom-right"></div> 
    </div> 
</div> 

</body> 
</html>

来源

2011-07-26 05:58:10 PersonThing

感谢您的答复。我实际上想知道是否可以强制显示滚动条（有点像堆栈溢出对那些代码窗口所做的那样）。我忘了我的页面的一部分。它实际上应该是这样的：http://i.imgur.com/HVKRB.png（没有滚动条的标题）。谢谢！ – aerain

然后给你的元素静态尺寸（'height：300px; width：20％;'或任何你喜欢的），然后给它们'overflow：auto;' - 告诉浏览器如果元素内的内容不适合它应该使用滚动条让用户看到其余的内容。 – PersonThing

大家总是不尊重我的老派桌子。但是，它是交叉浏览器，当窗口宽度被操纵时，它不会弄乱布局。现场演示：http://jsfiddle.net/hobobne/CPvTw/

<html> 
    <head> 
     <title>4 section demo</title> 
     <style> 
      html, body {height: 100%;} 

      #global_table {border-collapse:collapse; width: 100%; height: 100%;} 

      #section_0, 
      #section_1, 
      #section_2, 
      #section_3, 
      #section_4 {border: 1px solid #000000; font-weight: bold; text-align: center;} 

      #section_0 {padding: 20px 0px; height: 1%;} 
      #section_1 {} 
      #section_2 {} 
      #section_3 {} 
      #section_4 {} 
     </style> 
    </head> 
    <body> 
     <table cellpadding="0" cellspacing="0" border="0" id="global_table"> 
      <tr> 
       <td colspan="3" id="section_0">section 0</td> 
      </tr> 
      <tr> 
       <td rowspan="2" id="section_1">section 1</td> 
       <td colspan="2" id="section_2">section 2<div id="dragbar"></div></td> 
      </tr> 
      <tr> 
       <td id="section_4">section 4</td> 
       <td id="section_3">section 3</td> 
      </tr> 
     </table> 
    </body> 
</html>

来源

2011-07-26 06:56:28

我会使用jQuery添加滚动条和拖动条。 –

哇，这看起来相当不错，但我必须说，使用div（和更多html5ish）时代码更清洁 – aerain

当然是的。但是，请尝试操纵视图框的宽度：http：//jsfiddle.net/C7eA8/，正如您所看到的那样，容器互相跳下。因为这不是最理想的解决方案。我的方式看起来不太整洁，但非常灵活，非常灵活。 –

只是要像你想要的页面布局，并在需要的DIV设置 overflow-y:scroll;。这将工作正常。

来源

2011-07-26 07:34:16 Kaisar

你也可以使用jQuery UI插件（布局）以获得更好的外观和更多的自定义功能。 – Kaisar

如何创建这样

回答

相关问题