Question

我认为我的问题偏离了大多数人遇到麻烦的典型3栏问题。我正在寻找这样的东西：

带有页眉和页脚的3列。这将是一个Web应用程序，除非用户的垂直浏览器高度非常小，否则整个页面都不会滚动。我希望左侧边栏粘在屏幕左侧，最小宽度（以像素为单位），右侧边栏粘贴在屏幕右侧，最小宽度（以像素为单位），中心内容部分填充两个侧边栏之间的空间完全相同，但也有最小宽度（像素）。如果内容超出其高度，此中央内容部分将拥有自己的滚动条。

我遇到的主要问题是，我似乎无法找到任何3个列的布局，左右粘贴侧边栏，同时允许我指定中心内容的最小宽度。我找到的最接近我想要的是http://pmob.co.uk/temp/3colfixedtest_explained.htm但是我不能让我的生活让中心内容区域达到最小宽度！

Answer 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不兼容。

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

2 个答案: