3列全高CSS佈局，包含頁眉和頁腳，用於Web應用程序

我認爲我的問題偏離了大多數人遇到的典型3列問題。我正在尋找這樣的東西：3列全高CSS佈局，包含頁眉和頁腳，用於Web應用程序

3列與頁眉和頁腳。這將是一個Web應用程序，整個頁面不會滾動，除非用戶具有非常小的垂直瀏覽器高度。我希望左側邊欄粘貼到屏幕的左側，並以像素爲最小寬度，右側邊欄粘貼到屏幕的右側，並以像素爲最小寬度，並將中心內容部分填充到兩個側欄之間的空間完全相同，但像素的最小寬度也是如此。如果內容超出其高度，則該中央內容部分將具有其自己的滾動條。

我遇到的主要問題是，我無法找到任何3列布局，在允許我指定中心內容的最小寬度的情況下，左右側邊粘住邊欄。我發現的最接近的是我想要的是http://pmob.co.uk/temp/3colfixedtest_explained.htm，但我無法爲我的生活獲得中心內容區域的最小寬度！

來源

2011-09-19 jrterry

你在哪裏應用最小寬度？我只是嘗試過，它工作正常。嘗試將最小寬度添加到**外部**編號。 –

你正在推動你能用HTML/CSS在這裏完成什麼的邊緣......你希望你的網頁有什麼樣的支持？據我所知，除非高度不允許，否則左邊的頁眉和頁腳必須始終可見。 – sg3s

CSS

body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
.wrapper { 
    display: block; 
    width: 100%; /* define your max site width here */ 
    margin: 0 auto; /* centers the container, keep if not 100% wide */ 
    padding: 0; 
    clear: both; 
} 
.container { 
    display: inline-block; 
} 
.bar-left, 
.bar-right, 
.bar-mid { 
    float: left; 
    display: inline-block; 
    height: 100% !important; 
} 
.bar-left, .bar-right { 
    width: 20%; /* sidebar width */ 
    overflow: hidden; /* hide extra content */ 
} 
.bar-mid { 
    width: 60%; /* main content width */ 
    overflow: scroll; /* add scrollbar for extra content */ 
}

HTML

<div class="wrapper"> 
    <div class="container"> 
     <div class="bar-left"> 
      // stuff 
     </div> 

     <div class="bar-mid"> 
      // stuff 
     </div> 

     <div class="bar-right"> 
      // stuff 
     </div> 
    </div> 
</div>

那麼你應該做的是使用根據需要media query調整元素的寬度。有一個插件可以讓瀏覽器在沒有本地支持here的情況下使用媒體查詢。

使用css聲明min-width很好，但IE瀏覽器不能很好地播放。

來源

2011-09-19 17:03:38 Ben

請注意，它們不會自動佔用瀏覽器高度的100％，但它們會擴展到這個範圍。我很累，簽署了，也許別人可以爲你調試我的CSS。 – Ben

3列全高CSS佈局，包含頁眉和頁腳，用於Web應用程序

回答

相關問題