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/

中的原始代码

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

制作全屏高度布局
制作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;
}

双栏布局

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

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

此处的第一种方法是在HTML中的#side-bar之后设置#main。然后使用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示例，因为有关该问题的更多信息。

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

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

1 个答案:

全高

双栏布局

资源