网页设置darkblue背景仅顶部底部显示 导航菜单滑块问题求助

问题定位 #

你遇到的问题不是导航菜单及其滑块的逻辑问题，是样式语法、布局配置错误导致的，核心问题有3处：

• 样式语法与结构错误：<style> 标签被错误放在 </html> 闭合标签外，无法被浏览器正常解析；且样式代码第一行多了一个多余的闭合大括号 }，导致部分样式失效。
• 高度塌陷：你给主内容区 .area 设置了 height: 100%，但它的父级元素 body、根元素 html 都没有设置明确高度，百分比高度无法生效，导致 .area 实际高度为0，本该显示的浅灰色主内容区完全不展示，直接露出 body 设置的深蓝色背景。
• 默认边距未清除：body 浏览器默认自带8px的外边距，你的导航为绝对定位，仅覆盖了body的内容区域，外边距位置就漏出了深蓝色背景，也就是你看到的顶部、底部深蓝色块。

修复步骤 #

1. 把<style>标签移动到<head>标签内部，删除样式代码开头多余的}。
2. 给html和body添加height: 100%; margin: 0; padding: 0;样式，清除默认边距的同时让百分比高度生效。
3. 给.area添加padding-left: 60px;，避免主内容被左侧导航遮挡。

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/minimenu.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
        @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .fa-2x {
            font-size: 2em;
        }
        .fa {
            position: relative;
            display: table-cell;
            width: 60px;
            height: 36px;
            text-align: center;
            vertical-align: middle;
            font-size:20px;
        }
        .main-menu:hover,nav.main-menu.expanded {
            width:250px;
            overflow:visible;
        }
        .main-menu {
            background:darkblue;
            border-right:1px solid #e5e5e5;
            position:absolute;
            top:0;
            bottom:0;
            height:100%;
            left:0;
            width:60px;
            overflow:hidden;
            -webkit-transition:width .05s linear;
            transition:width .05s linear;
            -webkit-transform:translateZ(0) scale(1,1);
            z-index:1000;
        }
        .main-menu>ul {
            margin:7px 0;
        }
        .main-menu li {
            position:relative;
            display:block;
            width:250px;
        }
        .main-menu li>a {
            position:relative;
            display:table;
            border-collapse:collapse;
            border-spacing:0;
            color:#999;
            font-family: arial;
            font-size: 14px;
            text-decoration:none;
            -webkit-transform:translateZ(0) scale(1,1);
            -webkit-transition:all .1s linear;
            transition:all .1s linear;
        }
        .main-menu .nav-icon {
            position:relative;
            display:table-cell;
            width:60px;
            height:36px;
            text-align:center;
            vertical-align:middle;
            font-size:18px;
        }
        .main-menu .nav-text {
            position:relative;
            display:table-cell;
            vertical-align:middle;
            width:190px;
            font-family: 'Titillium Web', sans-serif;
        }
        .main-menu>ul.logout {
            position:absolute;
            left:0;
            bottom:0;
        }
        .no-touch .scrollable.hover {
            overflow-y:hidden;
        }
        .no-touch .scrollable.hover:hover {
            overflow-y:auto;
            overflow:visible;
        }
        a:hover,a:focus {
            text-decoration:none;
        }
        nav {
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            -o-user-select:none;
            user-select:none;
        }
        nav ul,nav li {
            outline:0;
            margin:0;
            padding:0;
        }
        .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
            color:#fff;
            background-color:#5fa2db;
        }
        .area {
            float: left;
            background: #e2e2e2;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-left: 60px;
        }
        @font-face {
            font-family: 'Titillium Web';
            font-style: normal;
            font-weight: 300;
            src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
        }
    </style>
</head>
<body style="background-color:darkblue;">
    <div class="area"></div>
    <nav class="main-menu">
        <img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
        <ul>
            <li>
                <a href="/welcome.php">
                    <i class="fa fa-home fa-2x"></i>
                    <span class="nav-text">Home</span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fa fa-book fa-2x"></i>
                    <span class="nav-text">Homework</span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fa fa-list fa-2x"></i>
                    <span class="nav-text">Grades</span>
                </a>
            </li>
            <li class="has-subnav">
                <a href="#">
                    <i class="fa fa-table fa-2x"></i>
                    <span class="nav-text">Timetable</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-leanpub fa-2x"></i>
                    <span class="nav-text">Learning</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-gamepad fa-2x"></i>
                    <span class="nav-text">Games</span>
                </a>
            </li>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <p hidden>TU SA ZACINA SUBMENU</p>
            <li>
                <a href="#">
                    <i class="fa fa-bars fa-2x"></i>
                    <span class="nav-text">Submenu 1</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-bars fa-2x"></i>
                    <span class="nav-text">Submenu 2</span>
                </a>
            </li>
            <p hidden>TU SA KONCI SUBMENU</p>  
        </ul>
        <ul class="logout">
            <li>
                <a href="/index.php">
                    <i class="fa fa-sign-out fa-2x"></i>
                    <span class="nav-text">Logout</span>
                </a>
            </li>  
        </ul>
    </nav>
</body>
</html>

内容的提问来源于stack exchange，提问作者Adam