Community
Learn
Tools Library
AI Tools
Leisure
search
English
javascript - html高度自适应
迷茫
迷茫 2017-04-10 16:35:19
0
1
404

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

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

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

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

reply all(1)
刘奇
刘奇2017-04-10 16:37:19 1 floor

使用flex布局

<!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>
    <p style="height:100px" >top</p>
    <p class="flex1">middle</p>
    <p style="height:100px">bottom</p>
</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;
    }
    p {
        display: table-row;
    }
    </style>
</head>

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

</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template