CSS单列布局，以页眉和页脚为中心的固定宽度为100％高

  • Z时代
  • 2024-01-10
  • 分类：问答

我最近一直在研究CSS布局，该布局将显示固定宽度（最小宽度，最好可扩展）的单个居中列，占据整个高度（减去页眉和页脚）。

有什么建议吗？我尝试过这里发布的几种方法，但是没有一种符合我的标准。另外，我不想为此使用JS，因此它必须是纯CSS。

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

三列，每边的边距减去中心列宽度的一半再加上一个假的中心列，以拉伸到100％的高度？我有点不喜欢这个主意，因为我的侧栏不会有任何内容

边距为0的单列auto 0自动将其居中并置顶：xx px为标题留出空间？然后如何将其拉伸到100％的高度？

任何帮助，高度赞赏。

欢呼声

回答：

对于现代浏览器（2015年），使用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>

上面的代码既可以使用固定高度的页眉和页脚（只需在样式中添加一个高度），也可以使用可变高度（如当前所示-

可以根据页眉和页脚的内容而变化），而内容将占用其余空间。

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

有几种使用纯CSS做到这一点的方法。基本上，您需要从这样的html结构开始：

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

使用边界框，因此将与较旧的浏览器不兼容（并且您可能需要添加moz，webkit和ms前缀才能使其在所有浏览器中均可使用）：

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; }

使用绝对定位，并且对跨浏览器更友好：

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;}

略微更改了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;}
.middle {height:100%;}
.container {padding:10px;}

以上是 CSS单列布局，以页眉和页脚为中心的固定宽度为100％高 的全部内容， 来源链接： utcz.com/qa/411208.html

回到顶部