"Колонки одинаковой высоты с помощью CSS"
Bootstrap 3.3.0 Snippet by ASDAFF

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="page"> <div id="main"> <h1>Колонки одинаковой высоты. На чистом CSS.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste pariatur necessitatibus autem eaque consectetur voluptatem excepturi sed, expedita deleniti perspiciatis non porro nisi incidunt accusantium repellendus provident at quia quo, magnam, officiis unde soluta illo ut amet! Animi, fugit odio.</p> <p>Morbi elementum massa faucibus ullamcorper posuere. Mauris lectus sem, scelerisque sit amet leo vitae, congue tincidunt ex. Nullam feugiat enim at massa ultricies pellentesque. Nam tempus turpis viverra, mattis diam ac, malesuada mi. Cras vitae lobortis enim, non vulputate libero. Donec sed eros sem. Vivamus nec erat ipsum. Nullam a placerat mauris, id tincidunt metus.</p> <p>Pellentesque quis eros dignissim, volutpat augue in, lacinia lacus. Etiam vitae nunc et risus varius placerat sed eu arcu. Sed vel tellus magna. In tempor vel nibh non congue. Praesent auctor ullamcorper metus.</p> <div class="wireframe-box">Место для изображения.</div> </div> <aside> <div class="wireframe-box double"></div> <div class="wireframe-box double"></div> <div class="wireframe-box double"></div> <div class="wireframe-box"></div> <div class="wireframe-box"></div> <div class="wireframe-box"></div> </aside> </section>
#page { display: -webkit-flex; display: flex; max-width:1200px; margin:0 auto; } #main { -webkit-flex-grow:1; flex-grow:1; } aside{ -webkit-flex-shrink:0; flex-shrink:0; width:280px; } /*Стили для страницы*/ #main { background-color:#fff; padding:40px 100px 40px 40px; line-height: 1.5; color:#565a5c; } #main h1{ margin-bottom: 28px; font-size: 24px; } #main p{ margin-bottom: 24px; } #main .wireframe-box{ background-color:#e2e2e2; padding:200px 0; text-align: center; margin-bottom: 24px; } aside{ background-color:#9A9A9A; color:#fff; padding:20px; } aside .wireframe-box{ background-color:#D0D0D0; margin-top:20px; padding:50px; } aside .wireframe-box.double{ padding:100px; } @media all and (max-width: 800px) { #page { -webkit-flex-flow:column; flex-flow:column; } aside{ width:auto; } #main{ padding-right:40px; } }

Related: See More


Questions / Comments: