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

Question

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

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

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

这是您在 fiddle 中的原始代码 http://jsfiddle.net/CRzfS/

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

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

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

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

我们会一一面对问题。

全高

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

• 要仅填充屏幕高度，您可以查看此贴纸页脚实现: 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. 布局框架通过 float 侧边栏和容器使它们并排使用的常用方法
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
}

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

资源

如果您愿意布局网格系统框架，我建议您看看:http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

即使您不想使用它，仅查看 CSS 实现也会让您产生有趣的见解。

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

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