3 列全高 CSS 布局，带有用于 Web 应用程序的页眉和页脚
Posted
技术标签:
【中文标题】3 列全高 CSS 布局，带有用于 Web 应用程序的页眉和页脚【英文标题】：3 Column full height CSS layout with header and footer for web application 【发布时间】：2011-11-20 08:55:24 【问题描述】：我认为我的问题偏离了大多数人遇到的典型的 3 列问题。我正在寻找这样的东西：
带有页眉和页脚的 3 列。这将是一个 Web 应用程序，除非用户的垂直浏览器高度非常小，否则整个页面都不会滚动。我希望左侧边栏贴在屏幕的左侧并以像素为单位的最小宽度，右侧栏贴在屏幕的右侧并以像素为单位的最小宽度，以及中心内容部分填充两个侧边栏之间完全有空间，但也有最小宽度（以像素为单位）。如果内容超出其高度，该中心内容部分将有自己的滚动条。
我遇到的主要问题是，我似乎无法找到任何 3 列布局，这些布局可以将侧边栏左右粘贴，同时允许我指定中心内容的最小宽度。我发现最接近我想要的是http://pmob.co.uk/temp/3colfixedtest_explained.htm，但我一辈子都无法让中心内容区域具有最小宽度！
【问题讨论】：
你在哪里应用最小宽度？我刚试过，效果很好。尝试将 min-width 添加到 outer id。 您正在推动仅使用 html/css 即可完成的工作......您希望您的页面拥有什么样的支持？据我了解，除非高度不允许，否则左列页眉和页脚需要始终可见？ 【参考方案1】：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 配合使用。
【讨论】：
注意，它们不会自动占据浏览器高度的 100%，但它们会扩展至该高度。我累了，退出了，也许其他人可以为你调试我的 css。【参考方案2】：这里的工作示例：
3 columns layout with header and footer 100% height flex
html,body height: 100%; margin: 0px;
body
height:100%;
min-height: 100%;
background: #222;
color: #fff;
position:relative;
font-family: Arial
center
padding: 15px; box-sizing: border-box; color: #fff; font-weight: bold;
#header
height:70px;
width:100%;
top:0px;
left:0px;
background: #f60;
position:absolute;
#footer
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #f60;
position:absolute;
#content
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0px 0;
overflow: hidden;
.full-height
height: 100%;
width: 100%;
padding-top: 70px; /* header height */
display: flex;
overflow: auto;
.col
margin-bottom: 120px; /* header height + footer height */
flex: 1;
padding: 20px;
overflow: auto;
.col2 p
float: left; width: 90%;
margin: 1% 5% 1% 5%;
padding: 10px;
color: #f60;
background: #fff;
border: 1px solid #f60;
box-sizing: border-box;
text-align: center;
text-transform: uppercase;
overflow: hidden;
.col1
max-width: 150px;
background: #5c5;
.col2
box-sizing: border-box;
max-width: auto;
background: #eee;
color: #000;
.col3
max-width: 150px;
background: #5c5;
<body>
<div id="header">
<center> HEADER </center>
</div>
<div id="content">
<div class="full-height">
<div class="col col1">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col col2">
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
<p>3 column layout with footer and header fixed height</p>
</div>
<div class="col col3">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
</div>
<div id="footer"> <center>FOOTER</center> </div>
</body>【讨论】：
以上是关于3 列全高 CSS 布局，带有用于 Web 应用程序的页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章