Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » position fixed

Страниц (1): [1]
 

1. kuller - 28 Января, 2018 - 20:16:59 - перейти к сообщению
Доброго времени суток!
Подскажите как подправить верстку если колонка с навигацией с левой стороны сделать фиксированной position fixed тогда контент, колонка с правой стороны залазит на левую колонку. Как их выровнять? Вот что на данный момент у меня

Спойлер (Отобразить)


и sass
Спойлер (Отобразить)


добавил файл результата
2. rgl - 29 Января, 2018 - 11:39:59 - перейти к сообщению
сделать у левой колонки margin-left равным ширине правой фиксированной колонки?
3. kuller - 30 Января, 2018 - 14:25:48 - перейти к сообщению
rgl пишет:
сделать у левой колонки margin-left равным ширине правой фиксированной колонки?


в таком случае при адаптации шаблона будет гемор. Придется постоянно margin-left менять... это не хорошо
(Добавление)
вроде доперло ))) и да можно margin-left использовать. Только перед этим надо ширину везде указывать в процентах. Вот тупанул

Пробная страница. Отображается как и требовалось

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8. <style type="text/css">
  9. * {
  10.         -webkit-box-sizing: border-box;
  11.         -moz-box-sizing: border-box;
  12.         box-sizing: border-box;
  13.         margin: 0;
  14.         padding: 0;
  15. }
  16.  
  17. body {
  18.         background-color: #F2F4F7;
  19.         font-size: 16px;
  20.         min-width: 320px;
  21.         position: relative;
  22.         line-height: 1.65;
  23.         overflow-x: hidden;
  24.         opacity: 1; }
  25.  
  26.         .container {
  27.                 position: relative;
  28.                 display: block;
  29.                 width: 90%;
  30.                 margin: 0 auto;
  31.                 background-color: #fff;
  32.         }
  33.  
  34.         .header {
  35.                 position: fixed;
  36.                 top: 0;
  37.                 background-color: #303547;
  38.                 padding: 20px;
  39.                 color: #fff;
  40.                 z-index: 9;
  41.                 width: 90%;
  42.         }
  43.  
  44.         .flex {
  45.                 display: flex;
  46.                 flex-wrap: wrap;
  47.                 justify-content: space-between;
  48.                 margin-top: 67px;
  49.         }
  50.  
  51.         .sidebar {
  52.                 position: fixed;
  53.                 background-color: #ddd;
  54.                 width: 20%;
  55.                 height: 100%;
  56.         }
  57.  
  58.         .content {
  59.                 position: relative;
  60.                 display: block;
  61.                 width: 77%;
  62.                 margin-left: 23%;
  63.         }
  64. </style>
  65. </head>
  66. <body>
  67.  
  68. <div class="container">
  69.         <header class="header">
  70.                 Header
  71.         </header>
  72.         <div class="flex">
  73.                 <div class="sidebar">
  74.                         sidebar
  75.                 </div>
  76.                 <div class="content">
  77.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam excepturi, vitae aperiam voluptas eum nulla adipisci obcaecati, ullam debitis, unde esse cupiditate tempore nostrum accusamus officia ea numquam quam! Ea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur libero culpa ad cum quisquam atque ipsam voluptatum. Ullam nostrum iure perspiciatis eum commodi pariatur necessitatibus ad doloribus, consectetur vitae.
  78.                 </div>
  79.         </div>
  80. </div>
  81. <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
  82. </body>
  83. </html>
  84.  
4. rgl - 01 Февраля, 2018 - 14:03:40 - перейти к сообщению
rgl пишет:
сделать у левой колонки margin-left равным ширине правой фиксированной колонки?

Я имел ввиду все наоборот, сделать у ПРАВОЙ колонки margin-left равным ширине ЛЕВОЙ фиксированной колонки

 

Powered by ExBB FM 1.0 RC1