[Bootstrap] espace sous sidebar menu

**l_achraf** · 01/05/2017, 17h37

Bonjour tout le monde,
J'ai un issue concernant la hauteur du sidebar. Quand j'ajoute du contenu dans ma page, cela cree une bare de defilement pour naviguer en bas et je veux que le sidebar bar defile aussi.
ca fait un espace vide entre le sidebar et le footer.
Je vais attacher une capture d'ecran aussi pour bien visualiser l'issue et j'ai marque l'endroit ou il y a ce probleme en rouge.
Merci beaucoup pour votre aide.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Font Awesome-->
      <link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <!-- My CSS-->
      <link rel="stylesheet" href="style.css">
      <!-- My JS-->
      <script src="custom.js"></script>
 
 
      <title>Physics</title>
 
 
   </head>
   <body>
      <nav class="navbar navbar-inverse sidebar"  role="navigation">
         <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display --> 
            <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
 
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1" >
               <ul class="nav navbar-nav " >
                  <button type = "button" class ="btn btn-default btn center-block" style="background-color: #cfe0e8; text-align: center;"><span class="glyphicon glyphicon-home" style="margin-right: 10px;"></span>Home</button> <!--Home button</a-->
                  <li class=""><a href="#">Lesson<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-list-alt"></span></a></li>
                  <li ><a href="#">Help<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-question-circle"></span></a></li>
                  <li ><a href="#">Glossary<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-education"></span></a></li>
                  <li ><a href="#">ShowMe<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-eye-open"></span></a></li>
                  <li ><a href="#">Assumptions<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-asterisk"></span></a></li>
                  <li ><a href="#">Feedback<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-comment"></span></a></li>
               </ul>
            </div>
         </div> <!-- End of the container-fluid -->
      </nav>   <!-- End of the navbar -->
 
   </body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
    body,html{
		height: 100%;
	}
 
	/* remove outer padding */
	.main .row{
		padding: 0px;
		margin: 0px;
	}
 
	/*Remove rounded coners*/
 
	nav.sidebar.navbar {
        background-color: #333333;
		border-radius: 0px;
	}
 
	nav.sidebar, .main{
		-webkit-transition: margin 200ms ease-out;
	    -moz-transition: margin 200ms ease-out;
	    -o-transition: margin 200ms ease-out;
	    transition: margin 200ms ease-out;
	}
 
	/* Add gap to nav and right windows.*/
	.main{
		padding: 10px 10px 0 10px;
	}
 
 
	/*small/medium side display*/
	@media (min-width: 768px) {
 
		 /*Allow main to be next to Nav*/
		.main{
			position: absolute;
			width: calc(100% - 40px); /*keeps 100% minus nav size*/
			margin-left: 40px;
			float: right;
		}
 
		/*lets nav bar to be showed on mouseover*/
		nav.sidebar:hover + .main{
			margin-left: 200px;
		}
 
		/*Center Brand*/
		nav.sidebar.navbar.sidebar>.container , .navbar>.container-fluid .navbar-brand {
			margin-left: 0px;
		}
		/*Center Brand*/
		nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
			text-align: center;
			width: auto;
			margin-left: 0px;
 
		}
 
		/*Center Icons*/
		nav.sidebar a{
			padding-right: 13px;
		}
 
		/*adds border top to first nav box */
		nav.sidebar .navbar-nav > li:first-child{
			border-top: 1px #e5e5e5 solid;
		}
 
		/*adds border to bottom nav boxes*/
		nav.sidebar .navbar-nav > li{
			border-bottom: 1px #e5e5e5 solid;
		}
 
		/*allows nav box to use 100% width*/
		nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
			padding: 0 0px 0 0px;
		}
 
		/*gives sidebar width/height*/
		nav.sidebar{
			width: 200px;
			margin-left: -160px;
            min-height:calc(100% - 100px);
			float: left;
			z-index: 8000;
			margin-bottom: 0px;
		}
 
		/*give sidebar 100% width;*/
		nav.sidebar li {
			width: 100%;
		}
 
		/* Move nav to full on mouse over*/
		nav.sidebar:hover{
			margin-left: 0px;
		}
		/*for hiden things when navbar hidden*/
		.forAnimate{
			opacity: 0;
		}
	}
 
	/* .....NavBar: Fully showing nav bar..... */
 
	@media (min-width: 1330px) {
 
		/*Allow main to be next to Nav*/
		.main{
			width: calc(100% - 200px); /*keeps 100% minus nav size*/
			margin-left: 200px;
		}
 
		/*Show all nav*/
		nav.sidebar{
			margin-left: 0px;
			float: left;
		}
		/*Show hidden items on nav*/
		nav.sidebar .forAnimate{
			opacity: 1;
		}
	}
 
	section{
		padding-left: 15px;
	}
 
/*  Alberta Education Image */
.img{
  width:200px;
  height: 33px;
  margin-top:-7px;
}
 
/*Footer*/
.app-footer {
  height: 50px;
  padding: 0 1rem;
  line-height: 50px;
  color: #FFFFFF;
  background: #daebe8;
  border-top: 1px solid #333333;
  font-weight: bold;
  font-size: 12pt;}
 
 /*Allow the footer to include the left elements in a small device*/
@media (max-width: 768px) {
       .app-footer{
	    height: 175px;
		}
}

Invité · 02/05/2017, 08h35

Bonjour,

Merci de copier-coller les codes directement dans le contenu du message (pas en pièces jointes).
[EDIT] C'est bon : je l'ai fait pour toi.

N.B. une piste : "flexbox"

[Bootstrap] espace sous sidebar menu

Framework CSS Bootstrap

Discussions similaires

Partager

Partager