Question

我开始认为这是不可能的，但我想我会问你们。

基本上它是一个2列布局，但“业务”需要以下内容：

- 始终占据整个浏览器窗口

-Accommodate调整浏览器窗口的大小

-Left列将是固定宽度，但该页面到页面的宽度应该是灵活的。

-Left列顶部有一个固定高度的区域。

-Left列有一个底部区域。它应该占用浏览器窗口的剩余垂直空间。如果内容非常大，则只有该区域的滚动条。

- 右列应该占用浏览器窗口的剩余水平空间。

- 右列在顶部有一个固定高度的区域。

- 右列有一个底部区域。它应该占用浏览器窗口的剩余垂直空间。如果内容非常大，则只有该区域的滚动条。

我已经尝试了所有的东西...... div，浮动，绝对定位，表格，表格中的div ......

这甚至可能吗？

这是一个应该是什么样子的图像： http://imgur.com/zk1jP.png

Answer 1

这根本不可能，你不应该需要javascript。如果你关心那个浏览器，你确实需要一些IE6特定的黑客攻击。

布局的关键是您可以在绝对定位的元素上设置一个或更多边缘位置。这是一篇关于该技术的好文章：http://www.alistapart.com/articles/conflictingabsolutepositions/

以下是演示：http://www.spookandpuff.com/examples/2col2section.html

和来源：

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>2 col, 2 section layout.</title>

    <style type="text/css" media="screen">
     #leftColumn {
       position:absolute;
       top:10px;
       bottom:10px;
       left:10px;
       width:400px;
     }

     #rightColumn {
       position:absolute;
       top:10px;
       bottom:10px;
       right:10px;
       left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */
     }

   .topSection{
     position:absolute;
     top:10px;
     height:120px;
     left:10px;
     right:10px;
     padding:10px;
   }

  .bottomSection{
     position:absolute;
     bottom:10px;
     top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */
     left:10px;
     right:10px;
     padding:10px;
     overflow-y:auto;
   }

     /* Debug styles */
     body {background-color:#CCC;}
     div {border:1px solid #FFF;}

     #leftColumn {background-color:#7EF4B0;}
     #rightColumn {background-color:#EEF4A7;}
     #leftColumn .topSection{background-color:#56A97A;}
     #rightColumn .topSection{background-color:#D6D06D;}

    </style>

</head>

<body>
    <div id="leftColumn">
      <div class="topSection">
        <p>Left column, top section.</p>
      </div>

      <div class="bottomSection">
        <p>Left column, bottom section.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

    <div id="rightColumn">
      <div class="topSection">
        <p>Right column, top section.</p>

      </div>

      <div class="bottomSection">
        <p>Right column, bottom section.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
</body>
</html>

有一些技巧：首先，我只在Firefox中对此进行了测试，为您提供了一般性的想法 - 我还没有添加一些IE所需的修复程序：详细查看列表中的文章。

为了说明这个想法，我允许在所有方框周围留出10px的额外空间 - 你可能会在实际布局中将它们设置为0。

您可以使用以下规则在列之间设置.topSection的高度：

#leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}

#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}

我会使用带有类（或body标签上的类）的容器来指定左列的宽度，如：

#container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}

这允许您定义一组可以在其间切换的宽度“模板”。

Answer 2

使用一些javascript来帮助解决布局问题可能值得考虑。虽然我知道这不是理想的，但它是我在尝试处理全高布局之前成功使用的解决方案。

应该可以在没有完整高度滚动列的情况下获得您描述的布局，然后只需使用一点点javascript来保持它们填充浏览器的高度

Answer 3

如果你有使用ext.js框架的话，我相信这很容易做到。如果没有其他人提供更好的答案，如果您有兴趣，将使用代码更新。

更新：这是代码。经过测试，即使是IE6也能很好地工作。与仅使用css的解决方案相比，缺点是（i）需要JavaScript（很可能应用程序已经使用了JS）; （ii）Ext.js要求（可能或可能不太可行）：

请注意JavaScript代码中 style =“height：100px;” int html和 autoScroll：true 的用法。这允许顶部2个面板的固定高度，并在底部两个中用滚动条溢出。

Ext.onReady(function(){

   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

   var viewport = new Ext.Viewport({
        layout: 'border',
        resizable: false,
        items: [
            {
                region: 'west',
                id: 'west-panel',                    
                split: false,
                width: 300,                                        
                margins: '0 0 0 0',
                layout: 'border',                    
                items: [{
                    region: 'north',
                    contentEl: 'west1',                                            
                    border: false
                },{
                    region: 'center',
                    contentEl: 'west2',                        
                    border:false,
                    autoScroll: true
                }]
            },
            {
                region:'center',
                id:'center-panel',                    
                split:false,                    
                margins:'0 0 0 0',
                layout:'border',                    
                items: [{
                    region: 'north',
                    contentEl: 'center1',                        
                    border:false
                },{
                    region: 'center',
                    contentEl: 'center2',                        
                    border:false,
                    autoScroll: true
                }]
            }                                
         ]
    });        
});

和html：

<div id="west1" style="height: 70px;background-color: #AAA;">
    <p>Hi. I'm fixed.</p>
</div>
<div id="west2">
    <p> long content goes here</p>
</div>
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;">
    <p>Hi. I'm fixed too.</p>               
</div>
<div id="center2">        
<p> long content goes here</p>
</div>

如果您或任何人有兴趣，

演示将在稍后再次提供。如果可以，请说明。

Answer 4

你将faux columns到达那里。

您可以使用该技术进行两次垂直分色如果你想要单独的滚动条（请不要，你会让可用性小猫哭泣），你可以让每个垂直分隔都有max-height: 100%; overflow: auto;，使它们在达到100％高度时滚动。

对于“浮顶”蓝色条，您可以给出父级分隔position: relative; padding-top: 150px;，然后给出蓝色条position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden;。（我不确定100％的宽度。）
然后绿色和黄色内容不会重叠。

不可能的布局？

4 个答案: