我希望我的页面由两部分组成:左侧的面板 block 和右侧的内容 block 。页面必须拉伸(stretch)以适应视口(viewport)，这两个 block 也必须如此。
代码如下:
<!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>
我的问题是我希望 Accordion 适合页面高度，但页眉具有固定的像素大小。我需要做类似的事情:
.AccordionMenu section:target p {
height: 100% - 40px;
}
关于我如何在不使用丑陋的黑客的情况下做到这一点的任何提示？是否还有一种无需使用 ID 即可使用 anchor 和 :target 的方法？
提前致谢:)
最佳答案
.AccordionMenu {
position:relative;
}
.AccordionMenu section:target p {
position: absolute;
top:40px;
bottom:0;
}
应该可以解决问题
关于CSS - 另一个 %/px 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13401723/