意图

Question

意图

我想使用所有可用的水平和垂直空间绘制一个表格（所以说整个浏览器窗口减去边距和页眉等）。
调整浏览器窗口大小时，表格应动态调整大小。
它不应该比页面更宽或更长，而是如果内容大于单元格，则应该滚动内容。这些单元格在下图中用箭头标记。
方向上没有箭头的单元既不应改变其大小，也不应在该方向上滚动，而应固定。因此，表头只应变得更宽或更窄，左右条纹应仅改变其长度。

Like this

btw：我正在寻找纯CSS / HTML解决方案吗？

天真尝试

我认为这将是HTML 101：Example，但表格只会增长，直到显示整个内容，高度/宽度大小才会被忽略的CSS：

/* structure */
table {
    width: 80%;
    margin-left: 10%;
    height: 80%;
}
.right, .left {
    width: 200px;
}
.thead > td, .tfoot > td {
    height: 200px;
}
.center, .tbody > td {
  overflow: auto;
}

/* content boxes */
#content_lu, #content_ru, #content_lb, #content_rb {
    background-color: yellow;
    height: 200px;
    width: 200px;
}
#content_cu, #content_cb {
    background-color: blue;
    width: 800px;
    height: 200px;
}
#content_lm, #content_rm {
    background-color: green;
    width: 200px;
    height: 800px;
}
#content_cm {
    background-color: red;
    width: 800px;
    height: 800px;
}

和html：

<table>
    <thead><tr>
        <td class="left"><div id="content_lu"></div></td>
        <td class="center"><div id="content_cu"></div></td>
        <td class="right"><div id="content_ru"></div></td>
    </tr></thead>
    <tbody><tr>
        <td class="left"><div id="content_lm"></div></td>
        <td class="center"><div id="content_cm"></div></td>
        <td class="right"><div id="content_rm"></div></td>
    </tr></tbody>
    <tfoot><tr>
        <td class="left"><div id="content_lb"></div></td>
        <td class="center"><div id="content_cb"></div></td>
        <td class="right"><div id="content_rb"></div></td>
    </tr></tfoot>
</table>

DIV-尝试

我能够使用绝对定位的转角div和使用margin-left和-right的中心div来满足第一行的所有条件，将其框入父div。但是，我无法定位，例如最后居中的div因为绝对定位它不会被父div绑定。 Example

的CSS：

/* Structure */
div.main {
   position: relative;
    width: 80%;
    margin-left: 10%;
    height: 80%;
}

/* corners */
div.top.left {
    position: absolute;
    left: 0;        top: 0;
    width: 200px;   height: 200px;
}
div.top.right {
    position: absolute;
    right: 0;        top: 0;
    width: 200px;   height: 200px;
}
div.bottom.left {
    position: absolute;
    left: 0;        bottom: 0;
    width: 200px;   height: 200px;
}
div.bottom.right {
    position: absolute;
    right: 0;       bottom: 0;
    width: 200px;   height: 200px;
}

/* edges */
div.top.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    overflow: auto;
}
div.bottom.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    overflow: auto;
}
div.middle.left {
    margin-top: 200px;
    margin-bottom: 200px;
    width: 200px;
    overflow: auto;
}
div.middle.right {
    margin-top: 200px;
    margin-bottom: 200px;
    width: 200px;
    overflow: auto;
}

/* center */
div.middle.center {
    margin-top: 200px;
    margin-bottom: 200px;
    margin-left: 200px;
    margin-right: 200px;
    overflow: auto;
}

/* Content boxes */
#content_lu, #content_ru, #content_lb, #content_rb {
    background-color: yellow;
    height: 200px;
    width: 200px;
}
#content_cu, #content_cb {
    background-color: blue;
    width: 800px;
    height: 200px;
}
#content_lm, #content_rm {
    background-color: green;
    width: 200px;
    height: 800px;
}
#content_cm {
    background-color: red;
    width: 800px;
    height: 800px;
}

HTML：

<div class="main">
    <div class="top    left">  <div id="content_lu"></div></div>
    <div class="top    center"><div id="content_cu"></div></div>
    <div class="top    right"> <div id="content_ru"></div></div>
    <div class="middle left">  <div id="content_lm"></div></div>
    <div class="middle center"><div id="content_cm"></div></div>
    <div class="middle right"> <div id="content_rm"></div></div>
    <div class="bottom left">  <div id="content_lb"></div></div>
    <div class="bottom center"><div id="content_cb"></div></div>
    <div class="bottom right"> <div id="content_rb"></div></div>
</div>

Answer 1

这是使用绝对定位实现布局的一种方法。

对于HTML：

<div class="wrapper">
    <div class="left">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
    <div class="center">
        <div class="top">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot"><p>Lorem ipsum dolor sit amet...</p></div>
    </div>
    <div class="right">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
</div>

和CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    border: 1px dotted gray;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom:0;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.top {
    position: absolute;
    background-color: cyan;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
.mid {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
}
.bot {
    position: absolute;
    background-color: cyan;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
p {
    margin: 0;
    height: 100%;
    overflow: auto
}

请参阅演示：http://jsfiddle.net/audetwebdesign/sfrXp/

注意：我将高度和某些位置偏移设置为50px而不是200px，因为 jsFiddle面板有点小，但这个概念仍然有用。

要处理溢出单元格的内容，请将overflow: auto和height: 100%设置为包含内容的块级元素，在此示例中为p。

您可能还需要将height: 100%分配给body和html标记，以定义根（屏幕）元素的垂直维度。

带有固定边框单元格的表格

意图

天真尝试

DIV-尝试

1 个答案: