Высота aside по по высоте родительского div'a

343
08 февраля 2017, 22:58

Не могу растянуть боковую панель по высоте родительского div'a. Пробовал использовать варианты приведенные в этом вопросе, но блок ставится с правой стороны(хотя надо с левой). Еще пробовал такой вариант:

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Но тогда блок вообще пропадает. По сути все блоки должны иметь высоту по родительского блока. P.S. Все манипуляции проводил с левым желтым блоком.

Исходный код:

body { 
  line-height: 1; 
} 
ol, 
ul { 
  list-style: none; 
} 
/* End of Eric Meyer's CSS Reset */ 
 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary { 
  display: block; 
} 
body { 
  font: 12px/18px Arial, sans-serif; 
} 
/* Begin of styles for the demo (you can remove them) */ 
 
a.expand { 
  width: 90px; 
  display: block; 
  margin: 10px 0 0; 
} 
a.expand:hover { 
  height: 500px; 
} 
/* End of of styles for the demo */ 
 
.wrapper { 
  min-width: 460px; 
  max-width: 1450px; 
  margin: 0 auto; 
} 
/* Middle 
-----------------------------------------------------------------------------*/ 
 
.middle { 
  position: relative; 
  padding: 73px 71px 73px 72px; 
  background: linear-gradient(to top, rgba(250, 226, 143, 1), rgba(250, 239, 202, 1)); 
} 
.container { 
  background: #FFF; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11); 
} 
.container:after { 
  display: table; 
  clear: both; 
  content: ''; 
} 
.content { 
  float: left; 
  width: 685px; 
  position: relative; 
  overflow: hidden; 
} 
/* Left Sidebar 
-----------------------------------------------------------------------------*/ 
 
.left-sidebar { 
  float: left; 
  width: 115px; 
  position: relative; 
  background: #ffd703; 
} 
/* Right Sidebar 
-----------------------------------------------------------------------------*/ 
 
.right-sidebar { 
  float: left; 
  width: 207px; 
  position: relative; 
  background: #ffffff; 
} 
.right-menu { 
  float: left; 
  width: 300px; 
  position: relative; 
  background: #efefef; 
} 
/* Footer 
-----------------------------------------------------------------------------*/ 
 
.footer { 
  height: 365px; 
  background: #BFF08E; 
} 
#navbar { 
  margin: 0; 
  padding: 0; 
  width: 100px; 
} 
#navbar li {} #navbar a { 
  color: #af9300; 
  padding: 5px 0 10px 10px; 
  text-decoration: none; 
  display: block; 
  font-family: Vollkorn; 
}
<div class="wrapper"> 
  <div class="middle"> 
 
    <div class="container"> 
      <aside class="left-sidebar"> 
        <h1>Hotel V</h1> 
        <ul id="navbar"> 
          <li><a href="#">Find a hotel</a> 
          </li> 
          <li><a href="#">Meeting & Events</a> 
          </li> 
          <li><a href="#">About Hotel</a> 
          </li> 
        </ul> 
      </aside> 
      <!-- .left-sidebar --> 
 
      <aside class="right-sidebar"> 
        <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit. 
      </aside> 
      <!-- .right-sidebar --> 
 
      <main class="content"> 
        <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. 
        Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit 
        lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. 
      </main> 
      <!-- .content --> 
 
      <aside class="right-menu"> 
        <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit. 
      </aside> 
    </div> 
    <!-- .container--> 
  </div> 
  <!-- .middle--> 
</div> 
<!-- .wrapper -->

Answer 1

Вариант с position: absolute :

#wrapper { 
  position: relative; 
} 
 
#wrapper__left { 
  padding-left: 220px; 
} 
 
section { 
  padding: 10px; 
  background: green; 
} 
 
section + section { 
  margin-top: .5em; 
} 
 
aside { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  width: 200px; 
  background: yellow; 
}
<div id="wrapper"> 
  <div id="wrapper__left"> 
    <section>1</section> 
    <section>2</section> 
    <section>3</section> 
    <section>4</section> 
    <section>5</section> 
  </div> 
  <aside></aside> 
</div>

READ ALSO
Проблема в ПХП с кодировкой и функцией substr

Проблема в ПХП с кодировкой и функцией substr

Всем доброго времени сутокИзучаю пхп,на данный момент столкнулся с функцией

282
Нужен плагин для стилизации type=&ldquo;number&rdquo;

Нужен плагин для стилизации type=“number”

Нужен плагин для стилизации поля воода чисел вот такого типа http://prntscrcom/e5tvwz (что бы свести к минимуму редактирование цсс) Сейчас на уме один...

333
Ошибка при запуске gulp. Что делать?

Ошибка при запуске gulp. Что делать?

Думаю сначала нужно ES6 в ES5 конвертировать, а потом минифицировать

465