如果调整页面大小，左侧菜单有拥抱间隙

Question

我的应用程序出现问题，在调整页面大小时左侧菜单有很大的差距。我玩过 css 文件，但我没有成功。您的帮助将不胜感激。

CSS Class:

 .Login
{

    margin-right:40px;
}

.headerColor{
    background-color: #0083AA;
    color:black;
    position:fixed;
}

nav > div > ul > li > a{
     background-color:#0083AA;
    color:black;
}

.leftMenu {
    width: 210px;
    height: 100%;
    position: fixed;
    background-color: #0083AA;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 100;
    margin-top:50px;
    margin-left:-15px;
}
.formContent
{
    background-color:#0083AA;
    margin:50px 0 0 -125px;
    color:black;
    width:100%;
}

.leftMenu > nav > ul > li > a {
   background-color:#0083AA;
    color:black;
}

.formContent > form
{
    padding-top: 50px;
    -moz-border-radius: 5xp;
    -webkit-border-radius: 5xp;
    border-radius: 5xp;
}

.intputDisplay{
    width:150px;
}

索引页：

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
  <head>
       @Styles.Render("~/Content/css")
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <meta charset="utf-8">
        <title>Student Organization</title>
        <style type="text/css">
            .selected{background-color: #efefef; width:120px; } 
            .detail{width: 300px;margin: 30px;border-top: 1px solid #efefef;}
        </style>
    </head>
    <body id="index">

        <!-- Angular UI Router Directive for template insertion -->
        @*<div id="content" ui-view></div>*@
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" >
            <div ui-view="header"></div>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
           <div ui-view="LeftMenu" style="width:100%;height:100%"></div>
        </div>
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
            <div ui-view="content" style="width:100%;height:100%"></div>
        </div>

        <script src="~/Scripts/jquery-2.1.4.js"></script>
        <script src="~/Scripts/AngularJS/angular.js"></script>
        <script src="~/Scripts/AngularJS/angular-ui-router.js"></script>
        <script src="~/Scripts/myapp.js"></script>
        <script src="~/Scripts/Bootstrap/bootstrap.js"></script>


    </body>
</html>

左侧菜单

<aside class="leftMenu">
   <nav class="navbar navbar-nav">
      <ul class="nav nav-stacked">
            <li><a ng-href="/">Home</a></li>    
            <li ui-sref-active="active"><a ui-sref=".ListStudents">List Students</a></li>
            <li ui-sref-active="active"><a ui-sref=".Courses">Courses</a></li>
            <li ui-sref-active="active"><a ui-sref=".Prefessors">Professors</a></li>
      </ul>
  </nav>
 </aside>

顶部页眉：

<link href="~/Content/font-awesome-4.4.0/css/font-awesome.css" rel="stylesheet" />
<header ng-cloak>
    <nav class="navbar navbar-fixed-top headerColor">
        <div class="pull-right user-nav-drop">
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle Login" data-toggle="dropdown" ng-click="$event.preventDefault();">
                        <i class="fa fa-user fa-2x"></i>
                        <span style="font-size: 15px;">&nbsp {{username}} &nbsp </span> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu white" role="menu">
                        <li><a ui-sref="myApp.Logout" class="Login"><i class="glyphicon glyphicon-log-out"></i> Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </nav>
</header>

截图：

Answer 1

如果您也将蓝色 header 的高度固定为 10%，那么您只需添加

top: 10%;

改成你左边菜单的风格。只需使用为蓝色 header 指定的高度值。如果有none，您还可以在样式中添加"height: 10%;"。但要了解更多详情，请提供完整的简约示例！

如果调整页面大小，左侧菜单有拥抱间隙

Left Menu Has Hug Gap if Page Is Resized

css

asp.net-mvc-3

twitter-bootstrap-3