Question

如何指定适用于所有现代浏览器的CSS / HTML布局，并将组件推送到可用空间的边缘，并提供最大化的中心区域 - 减去边缘组件大小。像这样：

------------------------------
|    |   north         |     |
|    |                 |     |
------------------------------
|    |                 |     |
|    |                 |     |
|    |                 |     |
|west|     center      |east |
|    |                 |     |
|    |                 |     |
|    |                 |     |
|    |                 |     |
------------------------------
|    |     south       |     |
|    |                 |     |
------------------------------

目标是中心组件可用的空间由北，南，东和西区域内容的实际大小决定。

这可以用纯CSS / HTML解决吗？没有任何JS？

这个html实现了Firefox和Webkit的目标，但在IE9中，中心div无法访问可用的垂直空间。

<!doctype html>
<html>
<head>
</head>
<body>
    <div
        style="position: absolute; top: 20px; left: 20px; width: 200px; height: 200px;">
        <table style="width: 100%; height: 100%; border:1px solid gray; border-collapse:collapse;cell-padding:0px;">
            <colgroup>
                <col style="width: 1%" />
                <col style="width: 100%" />
                <col style="width: 1%" />
            </colgroup>
            <tbody>
                <tr height="1%">
                    <td></td>
                    <td>north</td>
                    <td></td>
                </tr>
                <tr height="100%">
                    <td>west</td>
                    <td><div style="width:100%;height:100%;border:1px solid green;">center</div></td>
                    <td>east</td>
                </tr>
                <tr height="1%">
                    <td></td>
                    <td>south</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Answer 1

您可能希望使用此帖子中的方框模型：CSS 100% height with padding/margin

请记住在你喜欢的HTML开头使用DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

或

 <!DOCTYPE html>

对于html 5。

doctype将告诉浏览器如何表现，并且它们与该指令几乎相同。

有关此网站http://www.w3schools.com/css/css_boxmodel.asp

上的框模型的一些解释

Answer 2

代码将同时适用于IE和Mozilla：

Final Result

<html>
<head>
</head>
<body>

<div style="position: absolute;width: 98%; height: 98%;">

<table style="border: 1px solid gray; text-align: center; vertical-align: middle; height: 100%; width: 100%;">

<colgroup>
<col style="width: 1%">
<col style="width: 100%; height: 100%;">
<col style="width: 1%">
</colgroup>

<tbody>

<tr height="1%">
<td></td>
<td style="vertical-align:middle">north</td>
<td></td>
</tr>

<tr height="100%">
<td>west</td>
<td style="border-top:  1px solid green; border-left:  1px solid green; border-right: 1px solid green; border-bottom:  1px solid green;  vertical-align: middle; height: 100%; width: 100%;">center</td>
<td>east</td>
</tr>

<tr height="1%">
<td></td>
<td style="vertical-align:middle">south</td>
<td></td>
</tr>

</tbody>

</table>

</div>

</body>
</html>

Answer 3

试试这段代码。

    <html>
<head>
<style type="text/css">

.top {
    background-color: #18ff3a;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 999;
}

.bottom {
    background-color: #3900ff;
    bottom: 0px;
    width: 100%;
    height: 50px;
    position: relative;
}

.left {
    background-color: #ff5a91;
    top: 0px;
    width: 50px;
    height: 100%;
    position: relative;

}
.right {
    background-color: #ffcf0e;
    top: 0px;
    right: 0px; 
    width: 50px;
    height: 100%;
    position: absolute;
}

</style>
</head>
<body style="margin:0px;padding:0px;width:100%;height:100%;">
<div style="position:relative;">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

如何使用CSS / HTML将组件推送到可用空间的边缘？

3 个答案: