0

我正在尝试使用 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;
}
4

1 回答 1

1

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

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

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

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

我得先提出来，有很多方法可以实现这个目标，但由于浏览器的支持，它们都有其局限性。我也建议不要使用表格布局，除非有必要。

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

我们将一一面对问题。

全高

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

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

CSS：

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

你可以在这里试试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 中设置你的#side-barafter 。#main然后使用 CSS 绝对定位设置#side-bar到左侧，并为您的#main. 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 示例。

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

于 2013-03-12T01:11:28.067 回答