Why my heights fixer code work wrong when browser window restored after being maximised?

后端 未结 3 505
谎友^
谎友^ 2020-12-21 00:24


    
        test manual height calculations
     

         


        
3条回答
  •  猫巷女王i
    2020-12-21 01:06

    You don't need javascript or tables to achieve the layout you want.

    box-sizing: border-box; can replace that javascript and is compatible with IE8+, FF, and Chrome. This is a good article on box-sizing.

    New Example

    Take this snippet and paste it into a new HTML document. This works in IE8, though we need to accommodate for it with height 99.8% on html,body using

    Header
    I'm Vertically Centered!
    I'm Vertically Centered!

    Original Example

    Here is a simple example featuring display: table; / display:table-cell;. It can be tweaked to give you the exact layout that you are looking for.

    Have a jsBin example!

    HTML

    Header
    I'm Vertically Centered!
    I'm Vertically Centered!

    CSS

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }    
    html,body {
        height: 100%;
    }
    .wrap {
        height: 100%;
    }
    .header {
        height: 5%;
        border: solid 1px #000;
        border-bottom: none;
    }
    .table {
        display: table;
        height: 90%;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .cell {
        display: table-cell;
        border: solid 1px #000;
        vertical-align: middle;
    }
    .footer {
        height: 5%;
        border: solid 1px #000;
        border-top: none;
    }
    

提交回复
热议问题