我試圖讓側面導航欄中充分去左邊問題的圖像（似乎是出於某種原因間隙），併爲它垂直向下延伸頁面。我似乎無法找出這一個。我不明白爲什麼左邊有一個小小的缺口，爲什麼它不能延伸到頁面的底部。

我已經嘗試添加「左」，但是，只是打破了所有的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%; 
}

來源

2017-11-25 TheOne745665

給類

.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)); 
});

來源

2017-11-25 15:54:23 Alessio

謝謝，這解決了左側白色空白的問題。任何想法如何使背景顏色到頁面的底部？ – 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的答案。

來源

2017-11-25 16:20:37

我已經提供了所有必要的信息，告訴TheOne745665添加一個自定義類來覆蓋Bootstrap CSS，因爲您可以閱讀註釋，所以不用擔心;） – Alessio

引導側面導航欄的問題

回答

更新新的請求

引導側面導航欄的問題

回答

更新新的請求

相關問題