4

HTML テーブルを使用して、単純なヘッダーを持つスクロール可能なサイドバーを作成する素敵なレイアウトがあります。ここで確認できます: jsFiddle デモ

私のソリューションの概要は次のとおりです。

<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 を使用して非常に簡単に実現できます。

次の 3 つのクラスがある場合:

.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. float {または、それも悪い習慣だと言う場合はインラインブロック:) )
  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 に答える