问题描述：

我试图让侧面导航栏中充分去左边问题的图像（似乎是出于某种原因间隙），并为它垂直向下延伸页面。我似乎无法找出这一个。我不明白为什么左边有一个小小的缺口，为什么它不能延伸到页面的底部。

我已经尝试添加“左”，但是，只是打破了所有的Navbars stytling。目前它与顶级导航栏相匹配，这就是我想要的样子。

任何帮助，将不胜感激。

HTML -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js"></script> 
    <script src="https://use.fontawesome.com/c6d65aa6d0.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title> Domain Checker Tool</title> 
</head> 
<body> 


<!-- Nav bar, Using bootstrap --> 
<nav class="navbar navbar" style="border-radius:0px;"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <div class="nav-bar-logo"> 
     <a href="/" class="navbar-left"><img src="logo"></a> 
     </div> 
     </div> 
    <div class="nav-list-container"> 
     <ul class="nav navbar-nav"> 
     <li><a href="/">Home</a></li> 
     <li><a href="/domaindiagnostics">Domain Diagnostics</a></li> 
     <li><a href="/serverdiagnostics">Server Diagnostics</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a id="dc" href="/addserver">Add Server</a></li> 
      <li><a id="bt" href="#">Something cool</a></li> 
      <li><a id="tl" href="#">Something cool</a></li> 
     </ul> 
     </li> 
    </ul> 

    <div class="searchnavbutton"> 
    <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search for Server or IP"> 
     </div> 
     <button type="submit" class="btn btn-primary">Search</button> 
     </form> 
    </div>

链接

Admin

</div> 
    </div> 
</nav> 
<div class="container-fluid sidenav"> 

    <div class="row"> 
     <div class="col-md-3"> 
      <ul class="nav navbar nav-stacked" style="border-radius:0px;"> 
       <li><a href="/">Home</a></li> 
       <li><a href="">Widgets</a></li> 
       <li><a href="">Pages</a></li> 
      </ul> 
     </div> 
     <div class="col-md-9"> 
      Text 
     </div> 
    </div> 

</div>

而CSS

/* Styles the Pre component, e.g whois/SSL/Ping/trace */ 
pre 
{ 
display:flex; 
white-space:pre-wrap; 
background-color:white; 
font-weight:bold; 
color:black; 
font-family:bookman; 
} 
/* stops the logo being right at the top */ 
/** NAVBAR SETTINGS **/ 
.sidenav 
{ 
    length:100%; 
    padding-right:40px; 
    width:100%; 
} 
.navbar 
{ 
    padding-top:3%; 
    padding-bottom:2%; 
    padding-left:5%; 
    background-color:#005c99; 
    margin-bottom:0; 
    width:100%; 
} 
a 
{ 
    font-weight:bold; 
    color:white; 
} 
/* DNS table heading styling */ 
th 
{ 
background-color:#005c99; 
color:white; 
font-weight:bold; 
} 

/* Main headings*/ 
h3 
{ 
background-color:#005c99; 
color:white; 
font-weight:bold; 
padding-bottom:0; 
margin-bottom:0; 
padding-left:10px; 
} 
/* Header in DNS where it says what type of records they are */ 
h5 
{ 
padding-left:10px; 
font-weight:bold; 

} 
/* Container for dns records, creates border ect */ 
.dnscontain 
{ 
border-style:solid; 
border-color:#005c99; 

} 
/* styling for all tables */ 
.table 
{ 
font-size:12px; 
} 

/* the query box styling */ 
.domainquery 
{ 
    width: 100%; 
    background-color:#005c99; 
    margin-bottom:3%; 
    padding:50px; 
    margin-top:0%; 
} 

/* Search button */ 
.searchnavbutton 
{ 
    margin-left:40px; 
    padding-left:40px; 
} 

/* styling of the logo */ 
.nav-bar-logo 
{ 
    margin-right:20px; 
    padding-right:20px; 
} 

/* for the RECORD MISSING */ 
.alert alert-danger 
{ 
    align:center; 
    text-align:center; 
} 
/* search history container within the top H3 Heading */ 
#searchHistory 
{ 
    text-align:center; 
    float:right; 
    margin-right:1%; 
    margin-top:1%; 
    font-size:12px; 
    font-weight:bold; 
    background-color:#005c99; 
    border-style:solid; 
    border-color:#005c99; 
} 

.historyContent 
{ 
    margin-top:2%; 
} 


/* styling for the div that contains the loading spinners */ 
.spinnercontain 
{ 
    vertical-align: bottom; 
    text-align: center; 
} 

.addserverform 
{ 
    margin-top:7%; 
}

答

给类

.col-md-3 { 
padding: 0; 
}

的一个内部.container-fluid.sidenav

因为你继承引导CSS。

更新新的请求

如果你想在侧边栏有背景，直到页面结束时，您可以使用JS：

var headerHeight, windowHeight; 

jQuery(document).ready(function() { 
    headerHeight = jQuery('nav').height(); 
    windowHeight = jQuery(window).height(); 
    jQuery('.sidenav .navbar').css('height',(windowHeight-headerHeight)); 

});

如果你需要它，这里的代码页上调用调整：

jQuery(window).resize(function() { 
    headerHeight = jQuery('nav').height(); 
    windowHeight = jQuery(window).height(); 
    jQuery('.sidenav .navbar').css('height',(windowHeight-headerHeight)); 
});

谢谢，这解决了左侧白色空白的问题。任何想法如何使背景颜色到页面的底部？ – TheOne745665

太棒了！最好是将自定义类添加到HTML中，因为您正在重写的样式来自Bootstrap。只是背景的第二个。 – Alessio

答

添加padding-left:0;的CSS .sidenav足以令你最后的CSS样子如下：

.sidenav 
{ 
    length:100%; 
    padding-right:40px; 
    width:100%; 
    padding-left:0; 
}

这里解决fiddle去看看。

P.S：我会推荐Alessio的答案。

我已经提供了所有必要的信息，告诉TheOne745665添加一个自定义类来覆盖Bootstrap CSS，因为您可以阅读注释，所以不用担心;） – Alessio

引导侧面导航栏的问题

更新新的请求

相关推荐