javascript - html高度自适应-php教程-PHP中文网

javascript - html高度自适应

php中文网

发布： 2016-06-06 20:22:13

原创

1542人浏览过

不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？
不需要考虑低版本浏览器。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        html,body         {width: 100%;height: 100%;}
        </style>
    </head>
    <body>
        <div style="height:100px">top</div>
        <div>middle</div>
        <div style="height:100px">bottom</div>
    </body>
    </html>

登录后复制

比如上面的middle，如何让它的高度铺满屏幕剩余的空间？

回复内容：

不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？
不需要考虑低版本浏览器。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        html,body         {width: 100%;height: 100%;}
        </style>
    </head>
    <body>
        <div style="height:100px">top</div>
        <div>middle</div>
        <div style="height:100px">bottom</div>
    </body>
    </html>

登录后复制

比如上面的middle，如何让它的高度铺满屏幕剩余的空间？

使用flex布局

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
    }
    body {
        display: -webkit-flex;
        -webkit-flex-direction:column;
    }
    .flex1 {
        -webkit-flex: 1;
    }
    </style>
</head>

<body>
    <div style="height:100px" >top</div>
    <div class="flex1">middle</div>
    <div style="height:100px">bottom</div>
</body>

</html>

登录后复制

使用table-row布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    body {
       display: table;
    }
    .one {
        background: red;
    }
    .two {
        background: blue;
    }
    .three {
        background: green;
    }
    div {
        display: table-row;
    }
    </style>
</head>

<body>
    <div style="height:100px" class="one" >top</div>
    <div class="two">middle</div>
    <div style="height:100px" class="three">bottom</div>
</body>

</html>

登录后复制