CSS 表格样式 - 获取表格行以填充整个内容区域

Question

我正在尝试使用 CSS 表格显示来布局我的页面，但我无法让我的主要内容区域占据页眉和页脚之间的整个区域（垂直）。主 div 包含一些浮动元素，它们不一定会延长屏幕的长度。基本上，无论我做什么，我的主要内容的区域都是由这些元素的垂直高度决定的。对此我能做些什么吗？谢谢！

HTML：

<div id="all-container">
    <div id="header">
  ...
    </div>
    <div id="table-container">
        <div id="content">
            <div id="side-bar">
               ...      
            </div>
            <div id="main">
               ... some content that's floated ...
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS：

#all-container {
    margin:0px;
    position:relative;
    min-height:100%;
    background-color:#E6DCD8;
}

#header {
    height:60px;
    padding-left:20px;
    padding-right:20px;
    background-color:#685642;
}

#table-container {
    display:table;
    height:100%;
}

#content {
    display:table-row;
    height:100%;
}

#side-bar {
    display:table-cell;
    vertical-align:top;
    padding-right:100px;
    height:100%;
    padding-bottom:60px;
}

#main {
    display:table-cell;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
    padding-bottom:60px;
    height:100%;
}

#footer {
    position:absolute;
    width:100%;
    height:50px;
    bottom:0px;
    background-color:#685642;
}

Answer 1

我将在黑暗中尝试回答。这些是我的建议，不一定是您正在寻找的规范正确答案。 没有准确回答关于表格布局的问题，但我提供了其他方法来实现相同的预期结果。

这是你在小提琴http://jsfiddle.net/CRzfS/的原始代码

我认为您至少有两个想要实现的设计目标：

1. 制作全屏高度布局
2. 制作 2 列布局

我得先提出来，实现目标的方法有很多，但由于浏览器的支持，都有其局限性。除非必要，否则我也建议反对表格布局。

对我来说，display: table 主要用于一个原因：让vertical-align 在固定高度的容器中工作，尤其是vertical-align: middle。从固定宽度表格自动计算表格单元格宽度也有相关用途，但这完全取决于您希望如何呈现数据或信息。

我们会一一面对问题。

全高

首先是布局的高度问题。高度灵活性一直是网页设计布局的痛点。

• 仅填充屏幕高度，您可以查看此贴纸页脚实现： http://www.cssstickyfooter.com/

这是一个全屏高度的示例，不考虑页脚实现：http://jsfiddle.net/CRzfS/3/

CSS：

html, body {
    height: 100%;
    min-height: 100%;
}

• 对于液体高度布局，您可以查看：http://www.mightymeta.co.uk/superstretch-a-vertically-fluid-layout-using-css/

• 要获得适当的灵活高度，您必须使用 CSS Flexbox。 http://caniuse.com/#feat=flexbox

你可以在这里试试http://flexiejs.com/playground/

您使用 CSS Flexbox 实现的示例：http://jsfiddle.net/CRzfS/4/

CSS：

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

#all-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    margin:0px;
    position:relative;
    min-height:100%;
    height: 100%;
    background-color:#E6DCD8;
}

#header {
    height:60px;
    padding-left:20px;
    padding-right:20px;
    background-color:#685642;
}

#table-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

}

#content {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    overflow: hidden;
}

#side-bar {
    vertical-align:top;
    min-width: 150px;
}

#main {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
}

#footer {
    width:100%;
    height:50px;
    background-color:#685642;
}

两栏布局

有很多方法可以实现这一点。必须考虑您支持的不同屏幕尺寸（这是一个令人头疼的问题）。每个都有自己的缺点。这也取决于您的宽度要求，即固定宽度、灵活宽度。

1. 通过绝对定位侧边栏并为主要内容设置边距的语义方式
2. 布局框架通过浮动侧边栏和容器使用的常用方法，因此它们并排
3. 使用display: inline-block 达到与#2 相同的效果。

这里的第一种方法是在 HTML 中的 #main 之后设置您的 #side-bar。然后使用 CSS 绝对定位将#side-bar 设置为左​​侧，并为您的#main 设置margin-right。 http://jsfiddle.net/CRzfS/2/

HTML：

<div id="table-container">
    <div id="content">
        <div id="main">
           ... some content that's floated ...
        </div>
        <div id="side-bar">
           ...      
        </div>
    </div>
</div>

CSS：

#table-container {
    position: relative;
}

#content {
    height: 200px;
}

#side-bar {
    width: 200px;
    position: absolute;
    left: 0; 
    top: 0;
    background-color: rgba(255,255,255,0.5);
    height: 100%;
}

#main {
    margin-left: 200px;
    height: 100%;
    overflow: hidden; // for floated elements within
}

这里的第二种方法，使用原始的 HTML，你只需要设置 CSS。 http://jsfiddle.net/CRzfS/5/

#table-container {
    overflow: hidden;
}

#content {
   width: 100%;
}

#side-bar {
    width: 33%;
    float:left;
}

#main {
    width: 66%;
    float: left;
    vertical-align:top;
    border-left-style:solid;
    border-left-width:normal;
    border-left-color:#685642;
    padding-bottom:60px;
    min-height: 100px;    
    overflow: hidden; // for floated elemnts
}

如果我不确定您对垂直高度部分的确切要求，如何将这两个布局要求结合在一起将会很困难。 我需要更多信息才能针对您的问题提供相关答案。

资源

如果你对布局网格系统框架持开放态度，我建议你看看：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

即使您不想使用它，只需查看 CSS 实现即可获得有趣的见解。

随着有关该问题的更多信息的出现，我将添加其他 jsfiddle 示例。

编辑：添加了更多信息和解释。