如何將標題移出滾動區域？

我有一個標題和一個可滾動的長內容。我希望標題不可滾動。我試着將overflow: hidden設置爲標題，但沒有成功。如何將標題移出滾動區域？

如何將標題移出滾動區域？

段：

<body> 
    <div style="overflow: hidden">Header</div> 
    <div style="overflow: scroll">Content - very long Content...

見a Plunker with this code。

我也嘗試在身體中設置樣式 - 沒有成功。

我知道有a way to make the header fixed using position fixed，但我不想使用它，因爲它需要知道頭部的提前高度（保證金）。這需要大小重複，並且如果頭部更復雜，則需要計算。

來源

2015-10-12 AlikElzin-kilaka

相關：http://stackoverflow.com/q/3593594/435605 –

先刪除你的內聯樣式。然後添加這個CSS。

html , body { 
    margin: 0px; 
    height: 100%; 

} 

.content { 
    height: 100%; 
    overflow: scroll; 
}

https://jsfiddle.net/sthsuuec/11/

來源

2015-10-12 07:33:46 Paran0a

我編輯的鏈接，stackoverflow目前真的對我來說是laggy。 – Paran0a

在jsfiddle（新鏈接）上面的代碼工作正常！尼斯安澤 - 很好的問題。豎起大拇指。 – cgee

看起來內容的底部被推到了窗口的下方。如果您將標題設置得更高，您可以更清楚地看到它。任何想法如何解決這個問題？ –

找到flex魔力。

Here是如何製作固定標題和可滾動內容的示例。代碼：

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
    </div> 
    </body> 
</html>

對於一個完整的Holy Grail實現（頁眉，頁腳，導航，側，與內容），使用Flex顯示，去here。

來源

2015-10-23 06:52:38

如何將標題移出滾動區域？

回答

相關問題