This question has already been answered:
I can not stretch the sidebar to the height of the parent div. I tried to use the options given in this question , but the block is placed on the right side (although it is necessary on the left). I also tried this option:
.parent { position: relative; } .child { position: absolute; left:0; right:0; top:0; bottom:0; } But then the block disappears altogether. In fact, all blocks must have a height on the parent block. PS All manipulations carried out with the left yellow block.
Source:
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 --> 
