Как сделать сайт разделённый на две половины?

269

02 июня 2017, 10:46

Имеется ввиду типа вот такого: https://www.studiometa.fr/ Есть какие-то готовые заготовки-шаблоны для этого?

Answer 1

Как вариант, можно использовать multiscroll.js https://github.com/alvarotrigo/multiscroll.js

Answer 2

.wrapper { 
  position: relative; 
  min-height: 100%; 
} 
.content { 
  height:100%; 
} 
.content .left-content { 
  width:50%; 
  float:left; 
} 
.content .right-content { 
  width:50%; 
  float:right; 
}

<div class="wrapper"> 
  <div class="content"> 
    <div class="left-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, veritatis, quasi! Amet voluptas reiciendis doloremque magni laudantium aliquam, maiores nisi, veritatis autem deserunt quo esse dolor culpa officia obcaecati atque cum temporibus nobis? Recusandae a aliquid nostrum ullam perferendis aliquam, veritatis sint reprehenderit, soluta deleniti fugiat, molestias nulla tempora sed.</div> 
    <div class="right-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio dolorem quos hic possimus sequi ut nemo quae accusantium expedita dolor facilis quibusdam veniam mollitia ea, quas reiciendis in dicta porro velit illum, ipsum consectetur aliquid, quod ullam! Ut natus alias, sint cumque, aliquam nostrum repudiandae incidunt corporis quos enim dolore.</div> 
  </div> 
</div>

А в чем проблема собственно?

Answer 3

Как вариант, пользоваться современными flex-ами.

html, body { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
} 
 
#parent { 
  display: flex; 
  width: 100%; 
  height: 100%; 
} 
 
#parent #left { 
  background-color: green; 
  flex-grow: 1; 
   
} 
 
#parent #right { 
  background-color: navy; 
  flex-grow: 1; 
}

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
  <div id="parent"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
  </div> 
</body> 
</html>