Html CSS转换顶部的空块_Html_Css_Transform_Translate3d

Html CSS转换顶部的空块

html css

Html CSS转换顶部的空块,html,css,transform,translate3d,Html,Css,Transform,Translate3d,当我尝试应用translate3d时（150px，0px，0px）在我的“content”div中，我在页面顶部得到一个空块。我不知道怎么修 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <

当我尝试应用

translate3d时（150px，0px，0px）

在我的“content”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>


html，正文{
保证金：0；
身高：100%；
}
#侧板{
颜色：白色；
宽度：150px；
身高：100%；
背景：1BA39C；
位置：绝对位置；
排名：0；
左：0；
过渡：所有。2放松；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
李{
边际：0px；
填充：10px；
}
李：悬停{
背景色：红色；
}
#导航条{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：40px；
背景：黑色；
}
.隐藏{
变换：translate3d（-150px，0,0）；
}
.牛皮{
变换：translate3d（0,0,0）；
}
.表演{
变换：translate3d（0,0,0）；
}
.人体秀{
转换：translate3d（150px，0px，0px）；
}
#内容{
过渡：所有。2放松；
}
#分包{
位置：相对位置；
顶部：50px；
}












面板
内容
var panel=document.getElementById（“侧面板”）；
var按钮=document.getElementById（“面板按钮”）；
var myContent=document.getElementById（“内容”）；
panel.onclick=函数（）{
panel.className=“隐藏”；
myContent.className=“bodyhide”；
};
button.onclick=函数（）{
panel.className=“show”；
myContent.className=“bodyshow”；
};

这里的代码笔

添加空白的不是翻译，而是

位置：固定在#导航栏
上
解决此问题的一种方法是将溢出：隐藏添加到#content
如果添加溢出隐藏，则会丢失内容