Content of element not 100% in IE10 inside of equal height columns

前端未结

关注

 4  693

For an application I am working on I need equal height columns. I chose to use CSS to style my column items as table\'s. In this way the height of each columns is indeed the max

相关标签:

4条回答

南旧

2021-01-25 11:14

Add html, body{height: 100%;} see this demo

If you are looking exactly as your jsfiddle, just add body{height: 100%;}

0 讨论(0)
发布评论:

提交评论
- 加载中...

后悔当初

2021-01-25 11:14

The following CSS and markup should work fine alone in modern browsers, but also includes jQuery fallback for vintage IEs.

http://jsfiddle.net/B3u7x/

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(window).load(function(){
                //Detect if < IE11
                if(document.documentMode){
                    setColContentHeights();
                    $(window).resize(function(){
                        setColContentHeights();                                             
                    });
                }
            });
            function setColContentHeights(){
                $('.columnsHolder').each(function(){
                    var maxContentHeight = 0;
                    var colContent = $(this).find('.column > .content');
                    colContent.each(function(){
                        $(this).css('height','');  //Reset any previous height setting.
                        //workout heighest column height.
                        if($(this).height() > maxContentHeight) maxContentHeight = $(this).height();
                    });
                    colContent.each(function(){
                        //apply height if required.
                        if($(this).height() < maxContentHeight)$(this).height(maxContentHeight);
                    });
                });
            }
        </script>
        <style>
            html, body{
                height:100%;
                margin:0;
            }
            .columnsHolder{
                display:table;
                height:100%;
            }
            .column{
                display:table-cell;
                height:100%;
                padding:0 10px;
                background:red;
            }
            .content{
                display:table;
                height:100%;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="columnsHolder">
            <div class="column">
                <div class="content">
                    hello I'm column1
                </div>
            </div>
            <div class="column">
                <div class="content">
                    hello I'm column2
                    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                    I like being tall.
                </div>
            </div>
            <div class="column">
                <div class="content">
                    hello I'm column3
                </div>
            </div>
        </div>
    </body>
</html>

0 讨论(0)

佛祖请我去吃肉

2021-01-25 11:19

Percentages along with height can be a funny one. I find that the way to get it right is to use jquery:

$('.element').height($('.element').parent().height()/100 * //percentage goes here);

0 讨论(0)
发布评论:

提交评论
- 加载中...
無奈伤痛

2021-01-25 11:21

This seems to be a bug: Make a DIV fill an entire table cell

I would reccomend using display: flex; instead, the html is much more consise.

Fiddle: http://jsfiddle.net/GXe9m/2/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: maybe this is not a bug: https://code.google.com/p/chromium/issues/detail?id=97959 After trying the flexbox it seems children elements can still not stretch to height: 100%; in some browsers, one way to fix it is position: relative; on the parent and position: absolute; on the child: http://jsfiddle.net/GXe9m/3/ Another way, though probably not the best is to use the display: flex; rules on the first column as well as on the row.

0 讨论(0)
发布评论:

提交评论
- 加载中...