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

如何解决CSS单列布局,以页眉和页脚为中心的固定宽度为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布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。

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

我不是专家,所以我不知道采用哪种方法:

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

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

任何帮助,高度赞赏。

欢呼声

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?