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应用程序

回答

相关问题