4

我有一个很好的布局，它使用一个 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 来做到这一点？

4

2 回答 2

6

您可以通过 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>

你更新的小提琴

于 2013-06-17T11:33:08.363 回答
0

首先，您不需要 display;table 来生成这样的布局。
你需要 ：

  1. 最小高度
  2. 浮动 {或 inline-block 如果有人告诉它也是不好的做法:) )
  3. 溢出。

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>... :)

于 2013-06-17T11:34:00.250 回答