Question

我在div中有3个div-s，我想在红色区域放置一个500px高度的图片，我想将红色高度区域固定到500px并想要拉伸其他div-s填充页面，我不知道热点，还测试50%给每个蓝色div-s但是没有用。

<html>
   <head></head>
   <body>
     <div>
        <div style="background-color: blue; height:100%"></div>
        <div style="background-color: red;height:760px"></div>
        <div style="background-color: blue;height:100%"></div>
     </div>
   </body>
</html>

What I want

Answer 1

我的解决方案：

<style>
    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        zoom: 1;
    }

    .main{
        background: yellow;
        height: 100%;
        display: table;
        min-width: 100%;
    }

    .box{
        background: blue;
        width: 100%;
        height: 100%;
        display: table;
    }

    .image{
        background: red;
        width: 100%;
        height: 100px;
        display: table-row;
    }
</style>

<div class="main">
    <div class="box">#1</div>
    <div class="image">#2</div>
    <div class="box">#1</div>
</div>

Answer 2

最简单的解决方案：使用表格（由于html5及其表现角色属性，它们再次对布局有效）

适用于“现代”浏览器（至少IE 8）：使用css display table + display：table-cell等在其他元素上使用表格渲染

当你有javascript时使用：使用javascript。这将落后于大多数时间，并且可能在JS引擎遇到错误时提交，因此它应该是您的最后手段（或者实际上是过去的）。示例（带说明）可在此处找到：http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

如果仅仅是视觉效果：使用容器div为蓝色和100％高度，然后将红色的中心放入其中（再次，多种方式实现它，例如表格，表格显示+ css垂直对齐， ...）

关于正确的HTML5解决方案（根据W3C规范使用角色属性标记表作为表示）

<table style="width:100%;height:100%;border-collapse:collapse" role="presentation">
    <tr>
        <td style="background-color: blue;"></td>
    </tr>
    <tr>
        <td style="background-color: red;height:760px"></td>
    </tr>
    <tr>
        <td style="background-color: blue;"></td>
    </tr>
</table>

这里完成工作小提琴（css部分对于它正常工作也很重要）：http://jsfiddle.net/8jFan/

有关HTML5 +表格的其他信息：

http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#table-layout-techniques

一方面，我们不鼓励桌子修复布局（“表不应该用作布局辅助工具。”），另一方面，规范继续描述如何使用表格进行布局。由于表格 - 与css替代品相反 - 向后兼容到目前为止（因为它们用于大多数时事通讯），它们似乎仍然比css“显示属性黑客”更好。

CSS⎼3div-s适合身高

2 个答案: