Не могу растянуть боковую панель по высоте родительского 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 -->
Вариант с 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Всем доброго времени сутокИзучаю пхп,на данный момент столкнулся с функцией
Нужен плагин для стилизации поля воода чисел вот такого типа http://prntscrcom/e5tvwz (что бы свести к минимуму редактирование цсс) Сейчас на уме один...
Думаю сначала нужно ES6 в ES5 конвертировать, а потом минифицировать