css - h5布局，上中下，中部怎么根据不同屏幕大小自适应。如下图。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - h5布局，上中下，中部怎么根据不同屏幕大小自适应。如下图。

巴扎黑 2017-04-17 13:36:47

[HTML讨论组]

709

如上图布局，当我中部文字内容不多时，怎么保证不同电脑屏幕下都是这种布局（底部贴紧下面，中部高度算是自适应的）。然后当文本内容撑起中部容器，底部才会被顶下去。

尽量不要用js。

巴扎黑

全部回复(5)

PHPz2017-04-17 13:38:47 5楼

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>test</title>

</head>
<style>

*{margin:0;padding: 0;}
.top{height: 100px;width: 100%;background: #333;}
.mid{min-height:calc(100vh - 200px);width: 100%;}
.bot{height: 100px;width: 100%;background: #222;}

</style>
<body>

<p class="top">上</p>
<p class="mid">中</p>
<p class="bot">下</p>

</body>
</html>
谢邀，（逃

赞 +0

添加回复

迷茫2017-04-17 13:38:47 4楼

html部分

<header class="header">顶部</header>
<footer class="footer">底部</footer>
<section class="content">中部</section>

style部分

body{ height:100%;overflow:hidden;}
.header,
.footer,
.content{
    width:100%;
    position:absolute;
    left:0;
}
.header{ top:0;height:44px;}
.footer{ bottom:0;height:44px;}
.content{top:0; bottom:0;}
.header ~ .content{
    top: 44px;
}
.footer ~ .content{
    bottom: 44px;
}

赞 +0

添加回复

伊谢尔伦2017-04-17 13:38:47 3楼

自己采用flex 布局试了下，可以的

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        body{margin: 0px;padding: 0px;}
        .box {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        
        header,footer {height: 100px;background: slategray;}
        center {flex: 1;background:pink;}
        
    </style>

    <body class="box">
        <header>头部</header>
        <center>中部</center>
        <footer>底部</footer>
    </body>

</html>

赞 +0

添加回复

阿神2017-04-17 13:38:47 2楼

我来个粗暴的。。。

<p style="height:100px;background-color:#a2a2a2;width:100%">top</p>
<p style="height:calc(100% - 100px);margin-bottom:-100px;">body</p>
<p style="height:100px;background-color:#a2a2a2;width:100%;">foot</p>

赞 +0

添加回复

迷茫2017-04-17 13:38:47 1楼

<!DOCTYPE html>
<html>
<head>
    <title> New Document </title>
    <meta name="Generator" content="NPP-Plugin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
    body{margin:0;padding:0;width:100%;height:100%;}
    .top,.bottom{width:100%;height:80px;background:#eee;z-index:2;position:absolute;}
    .content {width:100%;height:100%;padding:80px 0;overflow:scroll;
    box-sizing:border-box;position:absolute;top:0;z-index:1}
    .bottom{bottom:0}
    </style>
</head>
    <body>
        <p class="top"></p>
        <p class="content">
        111111
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        111111
        <br/>
        </p>
        <p class="bottom"></p>
    </body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>