Question

当我尝试将translate3d(150px,0px,0px);应用于我的＆＃34;内容＆＃34; div我在页面顶部看到一个空块。我不知道如何解决它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <style>
        html, body {
            margin: 0;
            height: 100%;
        }
        #side-panel {
            color: white;
            width: 150px;
            height: 100%;
            background: #1BA39C;
            position: absolute;
            top: 0;
            left: 0;
            transition: all .2s ease-out;
        }
        ul {
            list-style: none;
            margin: 0;  
            padding: 0;
        }
        li {
            margin: 0px;
            padding: 10px;
        }
        li:hover {
            background-color: red;
        }
        #nav-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: black;

        }
        .hide {
            transform: translate3d(-150px,0,0);
        }
        .bodyhide {
            transform: translate3d(0,0,0);
        }
        .show {
            transform: translate3d(0,0,0);
        }
        .bodyshow {
            transform: translate3d(150px,0px,0px);
        }
        #content {
            transition: all .2s ease-out;
        }
        #subcontent {
            position: relative;
            top: 50px;
        }
    </style>


    <div id="side-panel" class="hide">
        <ul>
            <li>
                <a href='#'>Uno</a>
            </li>
            <li>
                <a href='#'>Dos</a>
            </li>
            <li>
                <a href='#'>Three</a>
            </li>
            <li>
                <a href='#'>Cuatro</a>
            </li>
            <li>
                <a href='#'>Cinco</a>
            </li>
        </ul>
    </div>

    <div id='content'>
        <div id='nav-bar'>
            <button id="panel-button">Panel</button>
        </div>
        <div id='subcontent'>
            <p>Content</p>
        </div>
    </div>


    <script type='text/javascript'>
        var panel = document.getElementById("side-panel");
        var button = document.getElementById("panel-button");
        var myContent = document.getElementById("content");

        panel.onclick = function () {
            panel.className = "hide";
            myContent.className = "bodyhide";
        };
        button.onclick = function () {
            panel.className = "show";
            myContent.className = "bodyshow";
        };
    </script>
</body>

这里是codepen http://codepen.io/sbaglieri/pen/LERQXy

Answer 1

它不是添加空格的翻译，而是position:fixed上的#nav-bar。

解决此问题的一种方法是将overflow: hidden添加到#content

CSS转换在顶部翻译空块

1 个答案: