在純HTML和CSS中水平滾動內容的頁眉和頁腳

我試圖用HTML和CSS創建一個佈局，這樣我就沒有使用Javascript來做佈局的額外複雜性。在純HTML和CSS中水平滾動內容的頁眉和頁腳

佈局在下面，由三部分組成：標題，主要內容和頁腳。

Sample layout

頁眉和頁腳應該是相同的高度，並應始終是可見的。在調整大小時，標題，內容和頁腳應相應地展開/縮小，只有少數例外。首先，當主要內容的最大高度被擊中時，主要內容不應該再擴展，相反，頁眉和頁腳應該擴大。其次，當主要內容的最小高度被擊中時，沒有任何部分應該再合同了，並且視圖應該是可捲動的。

至於主要內容，它可以在屏幕底部的視口的主滾動條水平滾動，而頁眉和頁腳應保持原位。

到目前爲止，我已經想出瞭如何通過絕對定位的容器div來實現水平滾動的主要部分，它填充整個視口，但我似乎無法弄清楚任何元素的垂直大小。我能想到的唯一方法就是鉤住重新調整大小事件，我想避免這種情況，因爲它感覺很不舒服。

來源

2013-03-07 Jacob Snyder

<body> 
    <div class="header">header</div> 
    <div class="content">content 



</div> 

<div class="footer"></div>

和CSS

.header, .content, .footer { 
    position: absolute; 
} 
.header{ 
    top: 0; 
    width: 100%; 
    height: 50px; 
    background-color: #99CC00; 
    left: 0; 
    right: 0; 
} 
.content { 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 50px; 
    background-color: #FF6600; 
} 
.footer { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 50px; 
    background-color: #6600CC; 
}

和例子on dabblet

來源

2013-03-07 06:45:19

這不考慮任何的調整大小的限制。我已經想通了，但調整大小是使它變得棘手的，因爲頁眉和頁腳需要根據內容來調整大小。 – 2013-03-07 07:38:09

艱難的在你的問題，我只想用固定定位頁眉和頁腳，然後簡單水平含量格..見fiddle我製作

THE HTML

<div id="header">Header</div> 
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div> 
<div id="footer">Footer</div>

的CSS

*{ 
    padding:0; 
    margin:0; 
} 
html{ 
    overflow-y:hidden; 
} 
#header,#footer { 
    width:100%; 
    position:fixed; 
    height:50px; 
    left:0; 
    background:#404040; 
    z-index:9999; 
} 
#header{top:0;} 
#footer{bottom:0;} 
#content{ 
    position:absolute; 
    background:gray; 
    top:50px; 
    left:0; 
    min-width:100%; 
    bottom:50px; 
    float:left; 
    display:block; 
    width:5000px; /*your content width but 5000 for testing*/ 
}

如果你想頁眉和頁腳規模，你可以使用this fiddle

CSS3的方式
您可以使用該新的CSS3屬性Flexbox的：

參見以下鏈接瞭解Flexbox的一個Example

更多信息：Tutsplus

Flex的盒子是什麼會做的伎倆

但是在IE9中不支持 ...
艱難的所有新的瀏覽器將它含IE10：
caniuse

來源

2013-03-07 08:09:40

太棒了！我從來沒有聽說過這個:)。感謝您的額外信息Simon！ – 2013-03-07 08:21:56

柔性盒很酷，但不幸的是，我必須支持IE9。 – 2013-03-07 16:45:40

@JacobSnyder嘿m8他們的2個解決方案在我的答案..看到縮放頁腳的小提琴（那些工作到IE7） – 2013-03-08 08:27:18

在純HTML和CSS中水平滾動內容的頁眉和頁腳

回答

相關問題