Почему мой sidebar не идет до фона сайта?

Я хочу, чтобы у моего sidebar был height 100 %, но он остается из-за половины страницы, потому что он будет?

Sidebar CSS

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

Content CSS

.content{
     padding: 10px 10px 0 10px;
     float: center;
}

HTML

<LateralMenu />
<div className="content">
<center>
<div className="c--anim-btn">
  <span className="c-anim-btn">
    <div className="logo-home" dangerouslySetInnerHTML={{ __html: xxxxlogo }}/>
  </span>
  <span>
     xxxxx
  </span>
</div>
<hr width="50%"/>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
</center>
</div>

Sidebar HTML

<nav className="navbar navbar-default sidebar" role="navigation">
    <div className="container-fluid">
    <div className="navbar-header">
      <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
        <span className="sr-only">Toggle navigation</span>
        <span className="icon-bar"></span>
        <span className="icon-bar"></span>
        <span claclassNamess="icon-bar"></span>
      </button>      
    </div>
    <div className="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
      <ul className="nav navbar-nav">
        <li className="hvr-wobble-horizontal"><a href="/">Home<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
        <li className="hvr-wobble-horizontal"><a href="/demos">Demos<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
        <li className="hvr-wobble-horizontal"><a href="/categories">Categories<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>   
        <li className="hvr-wobble-horizontal"><a href="/users">Users<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a></li>                
        <li className="hvr-wobble-horizontal"><a href="/logout">Logout<span style={style} className="pull-right hidden-xs showopacity glyphicon glyphicon-log-out"></span></a></li>
      </ul>
    </div>
  </div>

</nav>

PD: Я использую ReactJS поэтому <lateralmenu / > но он как будто это был простой <div> с sidebar

0
задан 17.01.2017, 20:43
0 ответов

Для того, чтобы элемент взял 100 % высоты контейнера, у этого контейнера должна быть определенная высота; если то, что ты хочешь, состоит в том, чтобы у этого контейнера были также 100 %, у отца этого должна быть высота также, так до прибывать в этикетку html, все элементы, которые находят убежище до того, чтобы прибывать в sidebar у них должна быть высота 100 %:

html, body{
  height: 100%;
} 

Другой выбор состоит в том, чтобы использовать единицу vh что берет высоту экрана:

.sidebar{
  height: 100vh;
}
3
ответ дан 03.12.2019, 17:38
  • 1
    Второй выбор я функционировал верно, спасибо :) –  17.01.2017, 21:00

Решение @blonfu функционирует pefrecto. Но если твое приложение - больше dashboard, который является тем, что кажется, я рекомендую тебе делать две вещи, кроме которого уже они упомянули о тебе:

  1. У sidebar и content должен быть один height: 100%.
  2. Контейнер не должен быть scrollable. В Вашем месте, этом должен будь быть content.

Это способ поддерживать хороший UX, потому что пользователь, никогда не будет терять вида важные площади, как это меню и верхний брусок, где идет меню пользователя (профиль, закрывать сеанс, и т.д.).

Я помещаю тебе пример

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.container .sidebar {
  background-color: #34495e;
  flex: 0 0 250px;
  height: 100%;
  transition: all .23s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.container .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.container .content .top {
  background-color: #fff;
  flex: 0 0 50px;
}

.container .content .main {
  background-color: #F2F8FA;
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

#box {
  background-color: coral;
  border-radius: 3px;
  height: 1500px;
  margin: 0 auto;
  width: 150px;
}

@media screen and (max-width: 850px) {
  .container .sidebar {
    flex: 0 0 70px;
  }
}
<section class="container">
  <aside class="sidebar">
    
  </aside>
  <section class="content">
    <header class="top">
      
    </header>
    <article class="main">
       <div id="box"></div>
    </article>
  </section>
</section>
2
ответ дан 03.12.2019, 17:38