发表新帖
发表新帖

div height:100%; not working with display:table-cell;

前端 未结
关注
3 1114
闹比i
闹比i 2021-01-04 05:10

My code was working when




<
相关标签:
3条回答
  • 佛祖请我去吃肉
    2021-01-04 05:55

    Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add

    .table {
    position: absolute;
}

    in this case if you will add 

    .table {
    height: 100%;
}

    That will fit its parent height.

    0 讨论(0)
  • 醉话见心
    2021-01-04 06:00

    Your code should work now.

    <html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

    Example

    Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.

    0 讨论(0)
  • 深忆病人
    2021-01-04 06:12

    You have to set the height to 100% for all parent elements then...

    html, body {
    height: 100%
}

    Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.

    0 讨论(0)
 看不清?
提交回复
热议问题