CSS - 另一個％/ px問題

我希望我的頁面由兩部分組成：左側的面板塊和右側的內容塊。頁面必須拉伸以適合視圖端口，因此必須是這兩個塊。CSS - 另一個％/ px問題

下面的代碼：

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

感謝提前:)

來源

2012-11-15 Virus721

避免通用選擇器：http://www.kobashicomputing.com/avoid-using-universal-css-selector – Amberlamps

在JavaScript中實現它呢？ –

Amberlamps：謝謝，但我只是測試，如果我可以創建我想創建。這不是最終版本，所以我儘量保持它儘可能簡單，直到我知道該怎麼做，然後我會關心細節。 Sven Bieder：我想用純CSS做這個。 JavaScript調整大小真的很醜（已經用於其他）。如果js需要時間加載，您可以看到該塊在第一次加載頁面時調整大小，並且看起來不太清晰。此外，如果使用css無法完成這樣一個簡單的事情，那麼考慮到CSS 3提供的所有複雜工具... – Virus721

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

應該做的伎倆

來源

2012-11-15 16:23:41

感謝您的幫助，但我無法完成此工作，對不起。 – Virus721

對於你的身高，用the calc() function：

height: calc(100% - 40px);

請一定要保持周圍的減號的空間或將其將無法工作。

來源

2015-01-03 21:38:03 Rob

CSS - 另一個％/ px問題

回答

相關問題