CSS单列布局居中固定宽度100％高度w标题和页脚 [英] CSS Single-column layout centered fixed-width 100% height w header and footer

问题描述

我最近一直在寻找一个CSS布局，它将显示一个固定宽度（最小宽度，最好是可展开）占据整个高度（减去页眉和页脚）的中心列。

有什么建议吗？我已经尝试了几种方法张贴在这里，所以没有符合我的标准。此外，我不想使用JS这个，所以它必须是纯CSS。

我不是专家，所以我不知道采取哪种方法：

三列，每一侧边缘的边缘减去中心列宽度的一半，以及一个人造中心列可拉伸到100％的高度？我有点不喜欢这个想法，因为我的侧栏将没有任何内容

单列与margin 0自动0自动中心它和顶部：xx px为标题腾出空间？那么如何将它拉伸到100％的高度呢？

任何帮助都非常感激。

干杯，
chross

解决方案

更新

使用 display：flex ：

现代浏览器的简单方法snippetdata-lang =jsdata-hide =false>

  html，body {height：100％; padding：0; margin：0; width：100％;} body {display：flex; flex-direction：column;}＃main {flex-grow：1;} / *可选* / header {min-height：50px; background：green;}＃main {background：red;} footer {min-height：50px;背景：blue;}  

 < header& < / footer>  

/ div>

上面允许固定高度的页眉和页脚（只是为样式添加高度）以及变量高度对页眉和页脚的内容），其中内容占据空间的剩余部分。

如果内容比文档长，页脚将被下推。

旧帖：

css。基本上你需要从这样的html结构开始：

 < div id =wrapper 
< div class =top>< / div> 
< div class =middle> 
< div class =container> 
< / div> 
< / div> 
< div class =bottom>< / div> 
< / div> 
  

版本1 使用边框，因此不会与旧版浏览器（您可能需要添加moz，webkit和ms前缀，以使其在所有浏览器中正常工作）：

  html， 
 body {height：100％; margin：0; padding：0; } 
 #wrapper {padding：100px 0 75px 0;高度：100％; box-sizing：border-box; } 
 .middle {min-height：100％;位置：相对; } 
 .top {margin-top：-100px; height：100px; } 
 .bottom {margin-bottom：-75px; height：75px; } 
 .container {padding：10px; } 
  

版本1

带有内容的版本1

版本1居中的列

版本2 使用绝对定位，更多的跨浏览器友好：

  html，
 body {min-height：100％; padding：0; margin：0;} 
 
 #wrapper {padding：50px 0; position：absolute; top：0; bottom：0; left：0; right：0;} 
 .middle {min-height：100％;} 
 .top {margin-top：-50px; height：50px;} 
 .bottom {margin-bottom：-50px; height：50px;} 
 .container {padding：10px;} 
  

第2版

第2版与内容

版本2居中的列

版本3 会略微更改html，但如果您有可变高度标题和页脚，则效果会更好：

 < div id =wrapper> 
< div class =table> 
< div class =top row>< div class =cell>< / div>< / div> 
< div class =middle row>< div class =container cell>< / div>< / div> 
< div class =bottom row>< div class =cell>< / div>< / div> 
< / div> 
< / div> 
  

Css

  html，
 body {min-height：100％; padding：0; margin：0;} 
 
 #wrapper {position：absolute; top：0; bottom：0; left：0; right：0;} 
 
 .table {display：table; width：100％; height：100％;} 
 .row {display：table-row;} 
 .cell {display：table-cell;} 
 
。 } 
 .container {padding：10px;} 
  

版本3

具有不同高度标题的版本3和页脚

带有内容的版本3

< a href =http://jsfiddle.net/XGhP8/11/>版本3居中的列

I've been recently looking into an CSS layout that will display a single centered column with fixed-width (min-width, expandable preferably) that occupied the whole height (minus header and footer).

Any suggestions for this? I have tried several approaches posted here on so but none meets my criteria. Also, I do not want to use JS for this, so it has to be pure CSS.

I'm no expert so I don't know which approach to take:

three columns with each side columns margin minus half of center column width together with a faux center column to stretch to 100% height? I somewhat dislike this idea because my side columns will have no content whatsoever

single column with margin 0 auto 0 auto to center it and top: xx px to make room for header? Then how do I stretch it to 100% height?

Any help highly appreciated.

Cheers, chross

解决方案

Update

Simple way to do it for modern browsers (2015) using display:flex:

html, 
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>

The above allows for both fixed height header and footer (just add a height to the styles) as well as variable height (as shown currently - can change depending on the content of header and footer) with the content taking up the rest of the space.

If the content is longer than the document, the footer will be pushed down.

Old post:

There are a few ways to do this with pure css. Basically you need to start off with the html structure like this:

<div id="wrapper">
    <div class="top"></div>
    <div class="middle">
        <div class="container">
        </div>
    </div>
    <div class="bottom"></div>
</div>

Version 1 uses border-box so won't be compatible with older browsers (and you may need to add the moz, webkit and ms prefixes to get it working across all browsers):

html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }

Version 1
Version 1 with content
Version 1 centred column

Version 2 uses absolute positioning and is a bit more cross browser friendly:

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}

Version 2
Version 2 with content
Version 2 centred column

Version 3 changes the html slightly but is more robust for if you have variable height header and footer:

<div id="wrapper">
    <div class="table">
        <div class="top row"><div class="cell"></div></div>
        <div class="middle row"><div class="container cell"></div></div>
        <div class="bottom row"><div class="cell"></div></div>
    </div>
</div>

Css

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}

.middle {height:100%;}
.container {padding:10px;}

Version 3
Version 3 with different height header and footer
Version 3 with content
Version 3 centred column

这篇关于CSS单列布局居中固定宽度100％高度w标题和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！