如何使用CSS定位固定可變高度標題和可滾動內容框？

我正在嘗試製作帶有固定標題和可滾動內容區域的網頁。當標題有一個已知的高度時，這是微不足道的，但我正努力尋找一個解決方案，以確定標題是否流暢。如何使用CSS定位固定可變高度標題和可滾動內容框？

我想要的佈局是：

-------------- 
head 
-------------- 
content 
--------------

其中「頭」是它的任何高度的內容需要它是和「內容」沒有最低高度，但將達到視口底部的最大高度在成爲可滾動之前。

這些日子在純CSS中可能嗎？我針對的是IE8 +。

爲了澄清我想要什麼，here is what I would do if I knew the height of the header：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 

body { 
    margin: 0; 
} 

#head { 
    background: yellow; 
    height: 20px; /* I can't rely on knowing this. */ 
} 

#content { 
    background: red; 
    position: absolute; 
    top: 20px; /* here also */ 
    bottom: 0; 
    width: 100%; 
    overflow: auto; 
} 

     </style> 
    </head> 
    <body> 
     <div id="head">some variable height content</div> 
     <div id="content"> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
      scrollable content<br/> 
     </div> 
    </body> 
</html>

來源

2011-06-20 David Roe

您是否希望將滾動條放在內容的旁邊或整個頁面的高度？ – Eric

如果標題是「固定的」，它的高度是多少？ – Eric

滾動條理想地位於內容的旁邊。當我說固定的時候，我的意思是位置，即。它不會隨主要內容一起滾動。 –

通過「固定」假設你的意思position:fixed，我不認爲這是純粹的CSS可能，position:fixed採取元素從文檔流。

但是，它應該只需要一兩行JavaScript即可獲得您想要的內容。像這樣的東西（未經測試，只爲示例的目的，就需要語法調整，以實際工作）：

var height = document.getElementById("head").offsetHeight; 
document.getElementById("content").style.marginTop = height + 'px';

類似的東西應該讓你的固定<div>的呈現高度並設置相應的內容<div>的保證金。您還需要在固定的<div>上明確設置背景顏色，否則在滾動時內容將顯示爲流入固定的背景顏色。

來源

2011-06-20 16:37:02 Shauna

不要忘記在頁面大小調整後重新計算 – Eric

我可以設計標題，以便在寬度更改時不會重新流動，所以我不必擔心調整大小。 –

如果您可以使用JavaScript，這是一個很好的答案，因爲它不需要指定凍結面板上的初始高度或後續容器上的邊距。我只是將它推到pageLoad（）中併爲頁面大小調整添加一個事件偵聽器。 – Ravendarksky

Here's一個解決方案，但它是一個騙子。基本上，你有一個重複的首標元素，倒推的內容，在固定位置上的一個下：

<div class="outer"> 
    <div class="header">Header content goes here</div> 
    <div class="header-push">Header content goes here</div> 
    <div class="content"> 
     ... 
    </div> 
</div>

來源

2011-06-20 16:54:28 Eric

感謝@Eric的主代碼，我只是稍微調整了一下以使內容的標題變爲動態。我只是使用jQuery將內容粘貼到標題的高度，不管它有多大。 http://jsfiddle.net/K7h9k/5/ –

這是一個不錯的（如果有點哈克）解決方案，但我簡化了我的要求，使問題更容易回答。我實際上需要兩個獨立的列，所以我不能使用整頁滾動來做到這一點。也許Javascript是唯一的方法。我希望一些新的桌面佈局的東西會做的伎倆，但我一直無法使它的工作。 –

我一直在嘗試幾個小時來想出一個純粹的CSS解決方案，並得出結論，確實，這是不可能的。 96年發明的標準的奇蹟。 –

此JavaScript將採取固定報頭的可變高度和設置內容的上邊距到下方流動。只需調用頁面加載。

<script type="text/javascript"> 
    function AdjustHeight() { 
     var height = document.getElementById("fixedheader").offsetHeight; 
     document.getElementById("content").style.marginTop = height + 'px'; 
    }  
</script>

來源

2011-11-28 05:18:42 Keith

下面是一個完整的代碼示例Shauna的解決方案上面的懶/ confused /人誰不能得到這個工作。

<html> 
<head> 

<style> 
#FreezePaneHeader { 
    position: fixed; top:0; left: 0; width: 100%;background-color: gray; 
} 

#FreezePaneBody { 
    margin-top: 30px; 
} 
</style> 

<script type="text/javascript">   
     function resizeFreezePane() 
     { 
      var height = document.getElementById("FreezePaneHeader").offsetHeight; 
      document.getElementById("FreezePaneBody").style.marginTop = height + 'px'; 
     } 

     //Resizes content to allow static header with dynamic height on postbacks 
     function pageLoad() { 
      resizeFreezePane(); 
     } 

     var addEvent = function (elem, type, eventHandle) { 
      if (elem == null || typeof (elem) == 'undefined') return; 
      if (elem.addEventListener) { 
       elem.addEventListener(type, eventHandle, false); 
      } else if (elem.attachEvent) { 
       elem.attachEvent("on" + type, eventHandle); 
      } else { 
       elem["on" + type] = eventHandle; 
      } 
     }; 

     //also when page is resized. 
     addEvent(window, "resize", resizeFreezePane); 

    function GenerateLorem(ele){ 
     var x = document.getElementById(ele); 
     x.innerHTML = x.innerHTML + "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium euismod leoquis convallis. In ornare suscipit massa eu commodo. Pellentesque vel nibh volutpat, commodo libero et, 

porta tellus. Duis eu fringilla arcu. Etiam imperdiet lectus diam, dignissim viverra dui hendrerit id. Fusce condimentum bibendum tincidunt. Aenean fringilla felis elit, et dapibus ante tempus at. Phasellus quis dolor odio.</p>"; 
     resizeFreezePane(); 
     } 
    </script> 
</head> 

<body> 
<div id="FreezePaneHeader">Frozen Page Header</div> 
<div id="FreezePaneBody"> 
<button id="ButtonAddText" onclick="GenerateLorem('FreezePaneHeader'); return false;">Add more header text</button> 
<button id="ButtonAddText" onclick="GenerateLorem('FreezePaneBody'); return false;">Add more body text</button> 
<p id="PageContents"></p> 
</div> 
</body> 

</html>

來源

2015-05-14 15:03:32 Ravendarksky

我做了接受和Eric的答案的組合。一個空的div用於推動內容下面的「頭」。這個div的寬度由jQuery的設定時window.onresize被觸發：

function resizeHeader() { 
    $(".header-push").height($(".header").height()); 
} 
$(document).ready(resizeHeader); 
$(window).resize(resizeHeader);

更多信息，請參見this jsFiddle。

來源

2015-11-27 14:35:31 geca

奇怪的是，我喜歡這種方法最好。它不需要重複的標題（但它確實需要一個空白的div，這並不是我），並且它不需要內容知道關於標題的任何內容。它也短得多。 – Boom

有助於在窗口調整大小時添加一點延遲，以避免太多觸發器 - 我使用250毫秒，似乎足夠好：http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to - 調整後的大小 - 完成 – billynoah

花了很多時間弄清楚純粹的CSS解決方案是不可能的。這絕對有訣竅，但關於JS被禁用的人呢（儘管我可以想象他們已經有很糟糕的瀏覽體驗了）。 – edwardmp

如何使用CSS定位固定可變高度標題和可滾動內容框？

回答

相關問題