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

2023年11月21日 228次阅读

如何指定适用于所有现代浏览器的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>

最佳答案 您可能希望使用此帖子中的方框模型：
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的盒子模型有一些解释

点赞