2015/02/26 – table-cell 下的 padding 坑

最新推荐文章于 2024-01-20 18:16:13 发布

weixin_30820151

最新推荐文章于 2024-01-20 18:16:13 发布

阅读量136

点赞数

原文链接：http://www.cnblogs.com/yoyoone23/p/4301451.html

版权

2015/02/26 – table-cell 下的 padding 坑

描述：我要实现一个 fluid layout, 左右结构（左定宽、右100%填充；右边子容器是上下结构，上结构定高，下结构100%填充）。

思路：用 table-cell 实现左右（没有用 float），右边的上下结构采用 box-sizing: border-box;（即 padding-top + height, padding-top 的值就是上结构的定高）

进坑：由于用了 table-cell 进行父元素的布局，在浏览器调试中看 padding-top + height = 父元素高，但是其元素会缩写，导致下方留白。

　　　我认为是 table-cell 的居中对齐导致的（没有深究）。

出坑：在 table-cell 元素与其子元素之间加一层 div(style="position:relative;height:100%;")，使其子元素抛离 table-cell 对齐方式。成功！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>HTML5 Studio</title>
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        div { box-sizing: border-box; }
        .container { display: table; position: relative; height: 100%; }
        .toolbar { display: table-cell; min-width: 100px; height: 100%; }
        .mainSection { display: table-cell; position: relative; width: 100%; height: 100%; }
            .mainSection > div { position: relative; height: 100%; }
        .navigator { position: absolute; top: 0; left: 0; width: 100%; height: 50px; z-index: 1; }
        .editor { position: relative; height: 100%; padding-top: 50px; }
            .editor > div { display: block; position: relative; height: 100%; width: 100%; }
        .toolbarDetals { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5; }
        .studio { display: block; height: 100%; }

        @media (min-width: 992px) {
            .editor > div { display: table; }
            .toolbarDetals { display: table-cell; position: relative; width: auto; min-width: 200px; opacity: 1; }
            .studio { display: table-cell; width: 100%; }
        }


        .editor { background-color: silver; }
        .navigator { background-color: gray; }
        .toolbar { background-color: red; }
        .studio { background: url('img/bg.jpg') no-repeat; background-size: cover; }
        .toolbarDetals { background-color: yellowgreen; }
    </style>
</head>
<body>
    <div class="container">

        <div class="toolbar">
            <input type="button" value="test" onclick="test()" />
        </div>
        <div class="mainSection">
            <div>
                <div class="navigator"><span>&lt;1&gt;</span></div>
                <div class="editor">
                    <div>
                        <div class="toolbarDetals" id="toolbarDetals"></div>
                        <div class="studio"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function test() {
            var container = document.getElementById("toolbarDetals"),
                display = container.style.display;
            if (display === "none") {
                container.style.display = "block";
            } else {
                container.style.display = "none";
            }
        }
    </script>
</body>
</html>

layout

推荐： box-sizing: border-box; 好处大大滴！！

posted on 2015-02-26 15:51 MSchina 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/yoyoone23/p/4301451.html

weixin_30820151

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2015/02/26 – table-cell 下的 padding 坑

2015/02/26 – table-cell 下的 padding 坑描述：我要实现一个 fluid layout, 左右结构（左定宽、右100%填充；右边子容器是上下结构，上结构定高，下结构100%填充）。思路：用 table-cell 实现左右（没有用 ...
复制链接

扫一扫