Question

我有一个很好的布局，它使用HTML表创建一个带有简单标题的可滚动侧边栏。效果很好，你可以在这里查看：jsFiddle demo

以下是我的解决方案概要：

<aside>
    <table>
        <tr>
            <td>
                <header>
                    header
                </header>
            </td>
        </tr>
        <tr>
            <td class="secondcell">
                <div class="remaining">
                    ...
                </div>
            </td>
        </tr>
    </table>
</aside>
<article>
  ...
</article>

使用以下CSS样式：

aside { 
    position: absolute; 
    left:0; top: 0; bottom: 0; 
    width: 200px; 
}

aside header { 
    height: 100px; 
}

aside table {
    width:100%;
    height:100%;
}

.secondcell {
    height:100%; 
    width:100%;
}

.remaining { 
    height: 100%; 
    background-color: red; 
    overflow-y: auto; 
}

article { 
    position: absolute; 
    left: 200px; 
    padding:10px; 
}

但遗憾的是，我正在使用很多人不喜欢的HTML表格，因为它不是语义等等。

所以我想用CSS格式重现这个布局，但它不起作用。您可以在此处查看我的尝试：jsFiddle demo2

也许这根本不可能，所以我不能仅使用div来做CSS？

Answer 1

你可以通过css

非常简单地实现这一目标

如果您有以下三个类：

.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}

您只需将所有table代码替换为<div class="table"></div>
tr的所有<div class="row"></div>代码 td

的所有<div class="cell"></div>代码

Your updated fiddle

Answer 2

首先，您不需要显示;表格可以生成这样的布局你需要：

最小高度
float {或inline-block如果有人告诉它也是不好的做法:)）
溢出。

http://jsfiddle.net/aKzFZ/2

html, body {
    height:100%;
    margin:0;
}
aside {
    float:left;
    min-height:100%;
    background:red;
    border: 1px solid black;
    width: 200px;
    margin-right:1em;
    display:table;
}
aside .remaining {
    display:table-cell;
    height:100%;
}
aside header {
    display:table-row;
    height: 100px;
    background:white;
    border-bottom:1px solid;
}
.scroll {
    height:100%;
    overflow:auto;
}
article {
    overflow:hidden;
    margin-right:1em;
}

我认为将<aside>放在流程的前面并不是那么语义，在<header>中加上<h1> <hX>并且看不到{{1}} ... :)

使用CSS显示重现表格布局：表格属性

2 个答案: