所以我尝试使用纯CSS,永不使用表格换布局福音,我真的有.但在经历了令人难以置信的痛苦和痛苦之后,我只是准备放弃了.我愿意付出一些努力来完成CSS中的事情,不要误会我的意思.但是当看起来像布局表中可以完成的一些最简单的事情在CSS 中完全不可能时,我不在乎概念纯度是否真的开始受到打击.

现在,我可能看起来很生气,而且我很生气; 我对我浪费的时间感到生气,我很生气从QuarkXpress背景中走出来的人给我带来无用的固定宽度设计,我对CSS失败的承诺感到生气.但我不是想开始争论; 我真的想知道一个简单问题的答案,这个问题将决定我是否会再尝试使用纯CSS的东西,或者在我想要的时候使用布局表.因为我讨厌回到布局表,认为这件事是不可能的,如果它实际上不是.

问题是:有没有办法使用纯CSS布局在左边有一个列,它是固定宽度的,在它右边放置一个数据表,并让数据表整齐地占用剩下的什么空间可用？也就是说,通过在左侧单元格上设置宽度为100%且固定宽度的双单元布局表,可以轻松实现相同的布局？

Left column



Right column

应该这样做(显然实现将根据页面中的位置而有所不同,但我认为这是您正在寻找的概念).

我想这就是你要找的东西:

晚点再谢我.= P

(我显然在开玩笑......有点......)

是这你在找什么？

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}

    


      
CSS Left Frame Layout
      
Sample text here

    
  


  

    


      
Dynamic Drive CSS Library
      
Credits: Dynamic Drive CSS Library