css位置100％高度和偏移量的固定菜單

Question

我想創建一個網站左側的菜單。主要想法是YouTube如何製作它：
您在頂部（固定）和總是40px高度和100％寬度都有一個條。
在左邊你有菜單。您可以使用頂部欄中的按鈕打開和關閉它。如果菜單已打開，則菜單的左側將固定一個滾動條。菜單是100％height-40px（從頂部欄撤回）。
當菜單關閉時，內容的寬度爲100％，當菜單打開時，內容的寬度爲100％。
窗口滾動條僅滾動內容。菜單和頂部欄固定。

這裏是一個小例子：http://output.jsbin.com/gehatitaxe
並在小提琴一樣：

<!-- http://jsfiddle.net/zyam1m79/ --> 

但現在我有問題，與100％的菜單不能從頂部欄中撤銷40像素。所以內滾動條可以從窗口滾動一點點（到底部）。在菜單文本中最後有一個「x」，當您全部滾動到菜單底部時，不可能讀取它。

我該如何解決這個問題？我怎樣才能將固定的元素高度設置爲100％，並且它不佔用窗口高度，而是從更高級別的en元素的高度？

問候，並感謝您的幫助，
克里斯托弗

Answer 1

您可以使用CSS calc屬性來計算100％的高度減去頂部欄。例如：

.main_left { 
    height: calc(100% - 40px); 
    /* ... */ 
} 

我注意到你有襯墊的頂部和底部，所以40px以上將需要包括爲好，因此calc(100% - 120px);。要麼，要麼添加box-sizing: border-box;，以便填充不會添加到容器的高度。

Answer 2

使用position: fixed時，儘量避免使用100％寬度/高度。相反，100％寬度使用left: 0; right: 0，100％高度使用top: 0; bottom: 0。見下面的例子：

.table { display: table; } /* table */ 
 
    .table > * { display: table-row; } /* tr */ 
 
    .table > * > * { display: table-cell; } /* td */ 
 

 
/* main container */ 
 
.main{ 
 
    position: relative; 
 
    min-width: 1024px; 
 
} 
 

 
/* top */ 
 
.main_head{ 
 
    width: 100%; 
 
    height: 40px; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    transform: translateZ(0px); 
 
    z-index: 1999999999; 
 
} 
 
.main_head > div > div{ /* all + search */ 
 
    border: 1px solid #000; 
 
} 
 
.main_head > div > div:first-child{ /* menu */ 
 
    border: 1px solid #000; 
 
} 
 
.main_head > div > div:first-child > i{ 
 
    font-size: 40px; 
 
} 
 
.main_head > div > div:last-child{ /* User information */ 
 
    width: 400px; 
 
} 
 

 
/* Container menu + content */ 
 
.main_left_content{ 
 
    
 
} 
 

 
/* left: menu */ 
 
.main_left{ 
 
    width: 200px; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    border: 1px solid #000; 
 
    position: fixed; 
 
} 
 
.main_left > div{ 
 
    position: absolute; 
 
    background-color: red; 
 
    top: 40px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow-y: scroll; 
 
} 
 

 
/* right: content */ 
 
.main_content{ 
 
    border: 1px solid #000; 
 
    vertical-align: top; 
 
}

<div class="main"> 
 
         <div class="main_head table"> 
 
          <div> 
 
           <div> 
 
            <i class="fa fa-bars fa-lg"></i> 
 
           </div> 
 
           <div>Suche</div> 
 
           <div>User Information</div> 
 
          </div> 
 
         </div> 
 
         <div class="main_left_content table"> 
 
          <div> 
 
           <div class="main_left"> 
 
            <div> 
 
            <div> 
 
             Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x 
 
            </div> 
 
            </div> 
 
           </div> 
 
           <div class="main_content"> 
 
            Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div>