以适用于 IE/Edge 的方式按百分比将 div 分成几行？

Question

我有一个带有中心图像和两个侧边栏的流式布局页面。每个侧边栏分为两行。这些行的高度定义为其包含列的百分比...

...除了 Internet Explorer 和 Edge，它们的高度由它们的内容定义。

我当前的设置要求行的显示类型为 inline-table，我知道 IE 历来不支持这种类型。 IE 11 和 Edge 应该支持 inline-table，但它们似乎并不像其他浏览器那样解释它。

我可以使用什么方法来让 Microsoft 的浏览器提供我从其他所有内容中获得的结果？

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        .wrapper {background-color:#eee;}

        .column {
            width:25%;
            height:100%;
            display:table-cell;
            vertical-align:top;
        }

        .block_1 {background-color:#aaf;}

        .block_2 {
            width:50%;
            background-color:#afa;              
        }

        img {width:100%;}

        .block_3 {background-color:#faa;}   

        .row {
            width:100%;
            height:50%;
            vertical-align:top;    
            display:inline-table;
        }
        .a {
            height:30%;
            background-color:#ccf;              
        }
        .b {
            height:70%;
            background-color:#aac;              
        }
        .c {background-color:#fcc;} 
        .d {background-color:#caa;}
    </style>
</head>

<body>
    <nav class="navbar navbar-main">(navbar goes here)</nav>
    <div class="wrapper">

        <div class="column block_1">
            <div class="row a">row a</div>
            <div class="row b">row b</div>          
        </div>

        <div class="column block_2">
            <img src="images/homepage.jpg" class="img-responsive" alt="Home page image">
        </div>

        <div class="column block_3">
            <div class="row c">row c</div>
            <div class="row d">row d</div>          
        </div>

    </div>
</body>

https://jsfiddle.net/fkvnpk0b/2/

Answer 1

我可以建议在这里使用视口单位吗？

http://caniuse.com/#feat=viewport-units

vh 支持到 IE9；部分支持直接指vmin特别是。

无论如何，您想要更改 .row 和 .a 以及 .b 的高度以使用 vh 单位而不是 %。这将在页面加载时填充视口高度。

https://jsfiddle.net/m4tuna/z6co93wa/

当然，这与您当前的示例略有不同，因为您只是按百分比填充父级高度。如果您正在寻找它以特别是按百分比填充任何外部容器，则需要为容器分配一个高度或最小高度，以便行知道要填充什么。

以适用于 IE/Edge 的方式按百分比将 div 分成几行？

Divide div into rows by percent, in a way that works for IE/Edge?

html

css

internet-explorer

fluid-layout

microsoft-edge