不可能的布局？ [英] The Impossible Layout?

问题描述

基本上它是一个2列的布局，但商业想要这样做如下所示：

- 总是占用整个浏览器窗口

- 修改浏览器窗口大小

- 左列将固定宽度，但该宽度应该灵活适用于页面到页面。

- 左列在顶部具有固定高度的区域。

< - > - 左栏有一个底部区域。它应该占用浏览器窗口的剩余垂直空间。如果内容非常大，它将为该区域提供一个滚动条。

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

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

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

我试过了所有的东西... divs，floating，absolute positioning，tables，divs在表格中...

这甚至有可能吗？

下面是它应该是什么样子的图像：
http://imgur.com/zk1jP.png

解决方案

这不是不可能的，你不应该需要javascript。如果您关心该浏览器，您确实需要一些特定于IE6的攻击。<​​/ p>

布局的关键在于您可以设置一个或更多绝对定位元素上的边缘位置。这里有一篇关于这项技术的好文章： 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\"> 
 
 < head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
 
< title> 2 col，2节布局。< / title> 
 
< style type =text / cssmedia =screen> 
 #leftColumn {
 position：absolute; 
 top：10px; 
 bottom：10px; 
 left：10px; 
 width：400px; 
} 
 
 #rightColumn {
 position：absolute; 
 top：10px; 
 bottom：10px; 
 right：10px; 
 left：410px; / *这必须等于#leftColumn的总宽度，包括填充，边框，边距等* / 
} 
 
 .topSection {
位置：绝对; 
 top：10px; 
 height：120px; 
 left：10px; 
 right：10px; 
 padding：10px; 
} 
 
 .bottomSection {
 position：absolute; 
 bottom：10px; 
 top：160px; / *这必须等于.topSection的总高度，包括填充，边框，边距等。* / 
 left：10px; 
 right：10px; 
 padding：10px; 
 overflow-y：auto; 
 
 $ b $ *调试样式* / 
 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>左列，顶部。< / p> 
< / div> 
 
< div class =bottomSection> 
< p>左列，底部。< / p> 
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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>右栏，顶部。< / p> 
 
< / div> 
 
< div class =bottomSection> 
< p>右栏，底部。< / p> 
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。 b
$ b

您可以使用以下规则在列之间设置不同的.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} 
  

允许您定义一组宽度模板，您可以在两者之间进行切换。

I'm beginning to think this is impossible, but thought I'd ask you guys.

Basically it's a 2 column layout, but the "business" wants the following:

-Always take up the entire browser window

-Accommodate resizing of browser window

-Left column will be fixed width, but that width should be flexible from page-to-page.

-Left column has a region at the top with fixed height.

-Left column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region.

-Right column should take up remaining horizontal space of browser window.

-Right column has a region at the top with fixed height.

-Right column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region.

I've tried everything...divs, floated, absolutely positioned, tables, divs in tables...

Is this even possible?

Here's an image of what it should look like: http://imgur.com/zk1jP.png

解决方案

It's not at all impossible, and you shouldn't need javascript. You do need some IE6 specific hacks if you care about that browser.

The key to the layout is the fact that you can set one or more edge positions on an absolutely positioned element. Here's a good article on the technique: http://www.alistapart.com/articles/conflictingabsolutepositions/

Here's a demo: http://www.spookandpuff.com/examples/2col2section.html

and source:

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

There are a few tricks: First off, I only tested this in Firefox to give you the general idea - there are some needed fixes for IE which I haven't added: check the list apart article up top for details.

I've allowed 10px extra space around all the boxes just to illustrate the idea - you'd probably set these to 0 in a real layout.

You can set the height of .topSection differently between columns with some rules like:

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

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

I would use a container with a class (or a class on the body tag) to specify the width of the left column, something like:

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

That allows you to define a set of width 'templates' you can switch between.

这篇关于不可能的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！