1

I have 3 div-s inside a div, I want to put a picture in red area which have a 500px height, I want to fix red height area to 500px and want to stretch other div-s to fill the pages, I don't know hot fit that, also tests put 50% to each blue div-s but don't worked.

<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

4

2 回答 2

3

我的解决方案：

<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>
于 2013-07-25T22:11:56.213 回答
0

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

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

当你有 javascript 时工作：使用 javascript。这在大多数情况下都会滞后，并且可能会在 JS 引擎遇到错误时归档，所以它应该是你最后的手段（或者实际上已经过去了）。示例（带解释）可以在这里找到：http: //nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easyer/

如果它只是关于视觉效果：使用容器 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“显示属性黑客”更好的选择。

于 2013-07-25T21:48:54.160 回答