Вопросы Теги

HTML + CSS: серый фон прибыл даже вниз

Я хотел бы, чтобы серый фон прибыл даже вниз.

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


  
    
    
    
    Test

    
    

    
    
    
  
  
    
    
    



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

introducir la descripción de la imagen aquí

0
задан 13.12.2016, 18:38
2 ответа

Чтобы это решать podrГ-схвати использовать CSS3 Flexbox (совместимость IE10 +)

Например: 

.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>

Больше info: Flexbox guide

1
ответ дан 24.11.2019, 12:09

Попробуй добавлять, что следующее внутри nav.sidebar { }

min-height: 100% !important!;

ты Это заменяешь на height, которые у тебя есть ahГ-.

1
ответ дан 24.11.2019, 12:09
  • 1
    Эктор, где добавлять? –  Diego Sagredo 12.12.2016, 19:57
  • 2
    Внутри nav.sidebar { } ты это заменяешь на height, который у тебя есть там –  Hector Hernandez 12.12.2016, 20:33