Css 如果调整页面大小，左侧菜单将显示空白_Css_Asp.net Mvc 3_Twitter Bootstrap 3

Css 如果调整页面大小，左侧菜单将显示空白

css asp.net-mvc-3 twitter-bootstrap-3

Css 如果调整页面大小，左侧菜单将显示空白,css,asp.net-mvc-3,twitter-bootstrap-3,Css,Asp.net Mvc 3,Twitter Bootstrap 3,我的应用程序有一个问题，在调整页面大小时，左侧菜单有一个巨大的间隙。我已经使用了css文件，但还没有成功使用它。你的帮助将不胜感激 CSS类： .Login { margin-right:40px; } .headerColor{ background-color: #0083AA; color:black; position:fixed; } nav > div > ul > li > a{ background-col

我的应用程序有一个问题，在调整页面大小时，左侧菜单有一个巨大的间隙。我已经使用了css文件，但还没有成功使用它。你的帮助将不胜感激

CSS类：

 .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>

索引页：

 .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>


@style.Render（“~/Content/css”）
学生组织
.所选{背景色：#efefef；宽度：120px；}
.详图{宽度：300px；边距：30px；边框顶部：1px实心#efef；}
@**@

左侧菜单

<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>





如果您还将蓝色标题的高度固定为10%，那么您只需添加
top: 10%;

到您的风格的左菜单。
只需使用为蓝色标题指定的高度值。
如果没有，也可以在样式中添加“高度：10%；”。
但要了解更多细节，请提供一个完整的简约示例
 嗨，珍。屏幕截图是一个良好的开端，但从中诊断代码问题的可能性不大。我们需要看到一个工作代码示例。HTML，CSS等。请创建一个代码段。我添加了索引，顶部和左侧菜单。今天早上我会继续玩它。