Question

我希望我的页面由两部分组成：左边是一个面板块，右边是一个内容块。必须拉伸页面以适合视口，因此必须是这两个块。

以下是代码：

<!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吗？

提前致谢：）

Answer 1

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

应该做的伎俩

Answer 2

对于您的身高，请使用the calc() function：

height: calc(100% - 40px);

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

CSS - 另一个％/ px问题

2 个答案: