HTML + CSS: the gray background reaches down

Question

HTML + CSS: the gray background reaches down

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I would like the gray background to come down to the bottom.

body,html{
    height: 100%;
  }

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

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }

    nav.sidebar:hover + .main{
      margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    
    <div class="col-sm-3 col-md-2" id="menu1">
    <nav class="navbar navbar-default sidebar" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> MENÚ</a>      
        </div>
        <div class="collapse navbar-collapse" id="sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Menu 1<span class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2<span class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
              <ul class="dropdown-menu forAnimate" role="menu">
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
              </ul>
            </li>

            <li><a href="#">Menu 2<span class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>        
            <li><a href="#">Menu 3<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 4<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 5<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 6<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 7<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
            <li><a href="#">Menu 8<span class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>

          </ul>
        </div>
      </div>
    </nav>
</div>
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civLorem ipsum dolor sit amet, ut deserunt mediocrem per, nam ullamcorper philosophia ei, his nihil vocibus an. Unum antiopam eu vix. Posse dicta salutandi sit in. Eum id nibh albucius.

Qui an admodum nusquam instructior, an suas omittam conclusionemque vel, cum amet postea fastidii cu. Eam velit democritum voluptaria ei, ei mutat urbanitas mea, esse regione postulant in has. Sit solum viris platonem ad, movet deserunt quaerendum vis et. At cibo aeque ludus eum, mollis dolorem dolores duo in, eum ad sumo nemore. Ad consulatu eloquentiam nam, his in dictas sanctus abhorreant. Eruditi laoreet ad has.

Ea qui ludus voluptaria comprehensam, ferri veniam consetetur sea cu. Dicta deleniti et sed, purto soleat audire ex usu. At quot prima disputationi eum, at sit invidunt adipiscing. Ex dicunt civ</p>
</div>    
    

    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

html css bootstrap

asked by Diego Sagredo 12.12.2016 в 18:28

source

2 answers

Problem with float numbers in php Error using JPA

score 1 · Answer 1

To solve it you could use CSS3 Flexbox (compatibility IE10 +)

For example:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: left;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
  order: 4;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  flex: 3 0px;
  order: 2;
}

.aside-1 {
  background: gold;
  flex: 1 auto;
  order: 1;
}

.aside-2 {
  background: hotpink;
  flex: 1 auto;
  order: 3;
}

body {
  padding: 2em; 
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  </article>
  <aside class="aside-1">Aside 1</aside>
  <aside class="aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

More info: Flexbox guide

score 1 · Answer 2

1

Try adding the following within nav.sidebar { }

min-height: 100% !important!;

You replace it with the height that you have there.

answered by 12.12.2016 в 18:44