问题
I think my question deviates from the typical 3 column issues that most people have trouble with. I am looking for something like this:
3 columns with header and footer. This will be a web application where the entire page will NOT scroll unless the user has a very small vertical browser height. I want the left sidebar to stick to the left side of the screen and be a minimum width in pixels, the right sidebar to stick to the right side of the screen and be a minimum width in pixels, and the center content portion to fill the space in between the two sidebars completely but have a minimum width in pixels as well. This central content portion would have its own scroll bar should the content go beyond its height.
The main issue I am having is that I cant seem to find any 3 column layouts that stick the sidebars right and left while allowing me to specify a minimum width of the center content. The closest I have found to what I want is http://pmob.co.uk/temp/3colfixedtest_explained.htm but I cant for the life of me get the center content area to have a minimum width!
回答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>
Then what you should do is use a media query to adjust the elements' widths as needed. There is a plugin to make media queries work in browsers without native support here.
Using the css declaration min-width is nice, but doesn't play well with IE.
回答2:
Working sample here:
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>来源：https://stackoverflow.com/questions/7473513/3-column-full-height-css-layout-with-header-and-footer-for-web-application