僅限CSS - 滾動條的動態標題高度和100％內容高度

目標是讓滾動條不被動態高度標題隱藏。僅限CSS - 滾動條的動態標題高度和100％內容高度

有很多關於CSS高度100％計算器職位;我的問題是獨特的，所以如果這是一個愚蠢的藉口，但我找不到答案。

所以我的web應用程序需要垂直滾動酒吧+高100％，動態標題高度。標題的高度未知，因此內容區域的高度應爲100％ - 標題高度。

問題我找不出如何優雅地解決是內容垂直滾動條（尤其是底部向下滾動按鈕）會隱藏，如果你做一個高度：100％，其中標題是頂部。（身高> 100％並不理想）。

<style> 
    html{ 
    height:100%; 
    } 
    body{ 
    height:100%; 
    margin:0px; 
    padding:0px; 
    overflow:hidden; 
    } 
    #header{ 
    background:blue; 
    } 
    #content{ 
    background:red; 
    overflow-y:scroll; 
    height:100%; 
    } 
</style> 

<body> 
    <div id='header'> 
    dynamic height top. (Text here could be any length.) 
    </div> 
    <div id='content'> 
    100% with no-hidden scroll-down scrollbar button. 
    </div> 
</body>

這可以通過沒有JavaScript和沒有HTML/CSS表嗎？（我不得不使用CSS表列跨度的問題，似乎不好的做法，用於佈局HTML表格）

不知道如果一個CSS/HTML大師在那裏有一個答案。

http://jsbin.com/ijoqe4/ < - 在這裏看到

http://jsbin.com/ijoqe4/edit <隱藏的底部滾動按鈕 - 在jsbin編輯

感謝任何見解。 :)

來源

2011-04-30 Quang Van

表有什麼問題？他們是有效的HTML，他們很容易解決你的問題，而不需要任何複雜的黑客。 – 2011-04-30 19:44:18

我非常困惑。你發佈的exmaples似乎給你*正是*你所描述的你想要的。你能否說明你當前的嘗試和期望的效果之間的差異？ – 2011-04-30 21:05:29

@Thomas，其實我也嘗試過使用表格，並且它沒有工作。 – 2011-05-01 13:40:14

有了一個動態標題，據我所知，目前還沒有辦法在純CSS來做到這一點。您的問題，從這個事實，你就出現了：

想報頭是動態的，因此容器必須是動態的，因此
要使容器的位置根據頭部動態適應，需要一個block級別的標題，在其下面有一個block級別的容器。
有容器伸展到窗口的底部的唯一方法是設置position: absolute; top:0; bottom: 0;，與bottom參照窗口的底部。但是你需要top來指代頭部的底部，而不是窗口的頂部（這是元素bottom所指的元素）。

所以，由於在純CSS中不可能有一個關於兩個不同的其他元素調整位置的元素，您必須使用JavaScript解決方案或使用表格。傷心，但是真的。

不過，即使設計表通常被視爲一種禁忌，在這種情況下，這將是你最好的選擇乾淨，它仍然是 - 技術上 - 只有HTML和CSS。

來源

2011-04-30 23:10:32

感謝Herman的解釋，爲了得到它，必須多讀幾遍......它總是最簡單的東西，似乎是最令人困惑的，哈哈。我會咬緊牙關並使用JavaScript ......（我甚至無法讓滾動條使用CSS表格或reg表格進行操作http://jsbin.com/ijoqe4/8/edit）JavaScript似乎是最好的選擇。 – 2011-05-01 13:59:08

赫爾曼：我認爲你的信息是正確的，但你的第三點（如果我正確理解你的話）並不完全 - 你可以使一個元素具有100％的高度而不使用position：absolute：'html，body，＃content {height： 100％; }'會導致#content元素爲窗口高度的100％：http://jsfiddle.net/jshado1/hLbyE/需要注意的是，DOM樹上的所有父元素都必須有一個明確的高度。 – jacob 2013-02-18 20:13:52

@jacob事實上，你是對的，並且做你的建議是製作粘性頁腳和標題的常用解決方案。現在想想看，可能有辦法做到這一點，100％的身高和負的利潤率（以百分比爲基礎，以及？），但我不確定這種解決方案在任何情況下都是如何「動態」的，如果有效的話。值得嘗試，但！ – 2013-02-19 02:30:03

也許嘗試設置您的HTML，身高爲98％而不是100％。您已禁用身體溢出，因此使用100％的div超出瀏覽器大小。

來源

2011-04-30 23:53:38 robx

嗨，robx，謝謝你的回覆。是的，這是一種選擇......但我的強迫症不能忍受浪費那些珍貴的像素......（那些在結束底部/中心Div和視口底部）：/和人的狀態欄的高度可能不同，以及頂部的動態高度... – 2011-05-01 13:48:57

僅限CSS - 滾動條的動態標題高度和100％內容高度

回答

相關問題