0

ページを左側のパネル ブロックと右側のコンテンツ ブロックの 2 つの部分で構成したいと考えています。ビュー ポートに合わせてページを引き伸ばす必要があり、これら 2 つのブロックも引き伸ばす必要があります。

コードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Void Museum</title>
        <meta charset="utf-8">
        <style type="text/css">
        html * {
            margin: 0;
            padding: 0;
            }
        #panel,
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: 0;
            width: 250px;
            background: #CFC;
            }
        #content {
            left: 250px;
            right: 0;
            background: #FCC;
            }
        .AccordionMenu {
            width: 250px;
            height: 100%;
            overflow: hidden;
            }
        .AccordionMenu > header {
            width: 100%;
            height: 50px;
            }
        .AccordionMenu > section {
            width: 100%;
            }
        .AccordionMenu > section > p {
            width: 100%;
            height: 0;
            overflow: hidden;
            background: #F00;
            -webkit-transition: all 1s;
               -moz-transition: all 1s;
                -ms-transition: all 1s;
                 -o-transition: all 1s;
                    transition: all 1s;
            }
        .AccordionMenu section:target p {
            height: 300px;
            }
        .AccordionMenu header {
            background: #0F0;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="panel">
            <div class="AccordionMenu">
                <section id="block0">
                    <header><a href="#block0">BLOCK 0</a></header>
                    <p>CONTENT 0</p>
                </section>
                <section id="block1">
                    <header><a href="#block1">BLOCK 1</a></header>
                    <p>CONTENT 1</p>
                </section>
                <section id="block2">
                    <header><a href="#block2">BLOCK 2</a></header>
                    <p>CONTENT 2</p>
                </section>
                <section id="block3">
                    <header><a href="#block3">BLOCK 3</a></header>
                    <p>CONTENT 3</p>
                </section>
            </div>
        </div>
        <div id="content">
        </div>
    </body>
</html>

私の問題は、アコーディオンをページの高さに合わせたいのですが、ヘッダーのサイズがピクセル単位で固定されていることです。私は次のようなことをする必要があります:

.AccordionMenu section:target p {
    height: 100% - 40px;
    }

醜いハックを使わずにこれを行う方法についてのヒントはありますか? ID を使用せずにアンカーと :target を使用する方法はありますか?

前もって感謝します ：）

4

2 に答える 2

0

身長については、calc() 関数を使用します。

height: calc(100% - 40px);

マイナス記号の前後にスペースを入れておいてください。そうしないと機能しません。

于 2015-01-03T21:38:03.997 に答える
0 
.AccordionMenu { 
position:relative;
}
.AccordionMenu section:target p {
position: absolute;
top:40px;
bottom:0;
}

トリックを行う必要があります

于 2012-11-15T16:23:41.190 に答える