html的布局demo

header section footer 都是水平，垂直居中，文本内容居中

section的高度是根据文本内容自适应的，footer会一直在最下面

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body,p{
            margin: 0;
        }
        p {
            width: 1000px;
            margin: 0 auto;/**容器水平居中**/
            text-align: center;/**容器里面文本居中**/
            background-color: red;
        }
        header, footer{
            min-height: 60px;
            line-height: 60px;
            background-color: #ddd;
        }
        section {
            position: relative;
            height: calc(100vh - 120px);/**100vh 视口的高度- 头的高度和尾的高度*/
            background-color: #005aa0;    
            display:flex; 
            align-items:center;
        }
        
    </style>
</head>
<body>
    <header>
        <p>文字介绍2</p>
    </header>
    <section>
        <p>主题内容的文字介绍</p>
    </section>
    <footer>
        <p>底部文字介绍</p>
    </footer>
</body>
</html>

 

posted @ 2017-06-09 15:05  adouwt  阅读(397)  评论(0)  编辑  收藏  举报