Question

我创建了一个滑出式导航，可以从正常导航尺寸打开和关闭到细长的导航尺寸。我希望导航菜单一直到页脚的页脚的beginging。目前它与页脚重叠，并没有一直到页脚。

如何将导航的高度一直向下延伸并且不与页脚重叠，但可以根据需要向下推动页脚。

链接到我的工作代码fiddle

JS

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
 "@angular/common": "2.0.0-rc.4",
 "@angular/compiler": "2.0.0-rc.4",
 "@angular/core": "2.0.0-rc.4",
 "@angular/forms": "0.2.0",
 "@angular/http": "2.0.0-rc.4",
 "@angular/platform-browser": "2.0.0-rc.4",
 "@angular/platform-browser-dynamic": "2.0.0-rc.4",
 "@angular/router": "3.0.0-beta.1",
 "angular/router-deprecated": "2.0.0-rc.2",
"angular/upgrade": "2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.7",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
}

HTML

  $(document).ready(function() {

        /*
          $("ul.nav#main-menu li ").click(function() {
            $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg");
          }); */
          $(".nav#main-menu ").on("click", ".toggle-button-on", function() {
            $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
            $(".nav .fa-lg").toggleClass("fa-lg fa-3x");
            $(".nav#main-menu .toggle-button").toggleClass("nav-slim");
            $(".nav#main-menu li a i").css(
            {
               'font-size' : '30px',
               'line-height' : '100px'
            });
            $(".nav#main-menu span").hide();
            $("#menu .navbar-side").css("width","64px");
            $("#menu").css("width","64px");
            $("#content-panel ").css("margin-left","100px");


            $('[data-toggle="tooltip"]').tooltip('enable'); 
          });
          $(".nav#main-menu").on("click", ".toggle-button-off", function() {
            $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
            $(".nav .fa-3x").toggleClass("fa-3x fa-lg<></>");
            $(".nav#main-menu span").show();
            $(".nav#main-menu li a i").css(
            {
               'font-size' : '1em',
               'line-height' : ''
            });
            $("#menu .navbar-side").css("width","");
            $("#menu").css("width","");
             $("#content-panel ").css("margin-left","");
             $('[data-toggle="tooltip"]').tooltip('disable'); 
          });

       });

Answer 1

你必须在这里选择

使用position:fixed

第一次

使用position:fixed将菜单修复为屏幕，然后只需window个高度，height:100%即可完成工作，此处为css

#control-panel{
   overflow:hidden;
   height:100%;
   width:auto;
   position:fixed;
   top:0px;
   bottom:0px;
   background-color:#34495e;
   margin-top:0px;
   z-index:9999; 
 }

参见 FIDDLE

第二次使用position：absolute

如果您希望菜单为position:absolute。然后你应该使用jquery找到body高度。

然后是css

#control-panel{
   overflow:hidden;
   height:100%;
   width:auto;
   position:absolute;
   top:0px;
   bottom:0px;
   background-color:#34495e;
   margin-top:0px;
   z-index:9999; 
 }

您必须使用 jQuery

<强>已更新

var header_height = $(".navbar.navbar-inverse.navbar-static-top") .innerHeight() + $(".subheader-bar").innerHeight();

var height = $("body").innerHeight() - ($("footer").innerHeight() + header_height);
$("#control-panel").css({
          "height":(height - 10 )+"px",
          "top":(header_height + 10 )+"px"
});

UPDATED FIDDLE

CSS如何将菜单/导航的高度扩展到页脚？

1 个答案: