0

我希望我的页面由两部分组成：左侧的面板块和右侧的内容块。页面必须被拉伸以适应视口，这两个块也必须如此。

这是代码：

<!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;
    }

关于如何在不使用丑陋黑客的情况下做到这一点的任何提示？还有一种方法可以使用锚点和 :target 而不必使用 ID？

提前致谢 ：）

4

2 回答 2

0 
.AccordionMenu { 
position:relative;
}
.AccordionMenu section:target p {
position: absolute;
top:40px;
bottom:0;
}

应该做的伎俩

于 2012-11-15T16:23:41.190 回答
0

对于您的身高，请使用calc() 函数：

height: calc(100% - 40px);

确保在减号周围保留空格，否则它将不起作用。

于 2015-01-03T21:38:03.997 回答