发表新帖
发表新帖

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

后端 未结
关注
3 437
谎友^
谎友^ 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 <!--[if IE 8]>.

    This is the exact solution here.

    HTML and CSS

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>


  <style type="text/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;
    height: 100%;
}
.footer {
    height: 5%;
    border: solid 1px #000;
    border-top: none;
}
.tableTwo {
    height: 100%;
    display: table;
    width: 100%;
}
.cellTwo {
    display: table-cell;
    border: solid 5px #F00;
    vertical-align: middle;
}
  </style>

    <!--[if IE 8]>
    <style type="text/css">
        html,body {
            height: 99.8%;
    }
    </style>
<![endif]-->

</head>
<body>
    <div class="wrap">
        <div class="header">
            Header
        </div>      

        <div class="table">

            <div class="cell">

                <div class="tableTwo">

                    <div class="cellTwo">
                        I'm Vertically Centered!
                    </div>

                </div>

            </div>

            <div class="cell">
                I'm Vertically Centered!
            </div>

        </div>

        <div class="footer">
            Footer
        </div>      
    </div>      
</body>
</html>

    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

    <div class="wrap">
    <div class="header">
        Header
    </div>      

    <div class="table">

        <div class="cell">
            I'm Vertically Centered!
        </div>

        <div class="cell">
            I'm Vertically Centered!
        </div>

    </div>

    <div class="footer">
        Footer
    </div>      
</div>

    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;
}
    0 讨论(0)
  • 有刺的猬
    2020-12-21 01:14

    I had the exact same issue working on a project. It ended up that the best trick to end up with a cross-browser solution was actually absolute positionning. 

    .wrap{background:pink;position:absolute;top:0;left:0;right:0;bottom:0}

    You are allowed to be sceptical, but have a look at this jsfiddle ;)

    http://jsfiddle.net/evomk0zu/

    0 讨论(0)
  • 孤街浪徒
    2020-12-21 01:28

    Ok so after a little research, it appears this is really only capable of being done with JS as a companion. Research:

    • How do I make a div fill an entire table cell?
    • How to make <div> fill <td> height
    • Make a DIV fill an entire table cell

    They led me to this awesome little CSS Tricks page. (requires jQuery, tested using 1.9.1 [should be IE8 compatible]). That helps to let div elements get position:absolute; within a td and not spill out.

    As such, here is a link to a JSFiddle with your code as a base. It was necessary to position:absolute some elements, and others i added it to for cleanliness (as much as is possible with a table based layout).

    Tested on IE8, IE9, IE10, and working as expected.

    (If you right click on the output and view source, you should be able to see an html file that you can save and test with as a file outside of jsfiddle)

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