Доброго времени суток!
Подскажите как подправить верстку если колонка с навигацией с левой стороны сделать фиксированной position fixed тогда контент, колонка с правой стороны залазит на левую колонку. Как их выровнять? Вот что на данный момент у меня
Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Title</title> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta property="og:image" content="path/to/image.jpg"> <link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png"> <!-- Chrome, Firefox OS and Opera --> <meta name="theme-color" content="#000"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#000"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-status-bar-style" content="#000"> <style>body { opacity: 0; overflow-x: hidden; } html { background-color: #fff; }</style> </head> <body> <div class="container"> <div class="row"> <header class="col-md-12 col-lg-12 header"> <div class="col-md-12 col-lg-12"> <div class="logo"> <a href="#"> <img src="img/logo.svg" alt=""> Logo </a> </div> </div> </header> </div> <div class="row"> <div class="col-md-12 col-lg-3 sidebar"> Sidebar </div> <div class="col-md-12 col-lg-9 content"> <p><strong>Далеко-далеко</strong> за словесными горами в стране, гласных и согласных живут рыбные тексты. Пустился снова, силуэт сих снова не коварный за языкового текста до рекламных, агенство возвращайся, буквенных жизни это, первую переулка правилами?</p> <p>Наш, приставка страна единственное большой, власти, злых, взобравшись семь рот он алфавит осталось вершину курсивных сих всемогущая буквенных предупредила залетают необходимыми эта но вдали имеет ты? Предупреждал повстречался, но которое!</p> <p>Злых, знаках свою. Выйти по всей рукописи запятой дороге маленький дорогу, все вопроса переулка необходимыми точках повстречался текстов наш приставка одна над страна последний, за имеет ты всемогущая предложения рот скатился.</p> <p> lorem5000 </p> </div> </div> </div> <link rel="stylesheet" href="css/main.min.css"> <script src="js/scripts.min.js"></script> </body> </html>
и sass
Спойлер (Отобразить)CODE ( sass):
скопировать код в буфер обмена
@import "fonts" @import "libs" @import "vars" * -webkit-box-sizing: border-box -moz-box-sizing: border-box box-sizing: border-box margin: 0 padding: 0 &:before, &:after -webkit-box-sizing: border-box -moz-box-sizing: border-box box-sizing: border-box *::-webkit-input-placeholder color: #666 opacity: 1 *:-moz-placeholder color: #666 opacity: 1 *::-moz-placeholder color: #666 opacity: 1 *:-ms-input-placeholder color: #666 opacity: 1 body input:focus:required:invalid, body textarea:focus:required:invalid color: #666 body input:required:valid, body textarea:required:valid color: #666 html, body height: 100% background-color: #F2F4F7 body background-color: #F2F4F7 font-size: 16px min-width: 320px position: relative line-height: 1.65 font-family: $default-font overflow-x: hidden opacity: 1 .container background-color: #FFFFFF border-left: 1px solid #ddd border-right: 1px solid #ddd min-height: 100% .header position: fixed left: 0 right: 0 width: 90% margin: 0 auto background-color: #303547 line-height: 70px z-index: 1 .logo font-size: 40px text-transform: uppercase font-weight: bold a color: #fff text-decoration: none img position: relative top: -5px height: 30px .sidebar, .content margin-top: 70px .sidebar position: fixed background-color: #ddd height: 100% .content @import "media"
добавил файл результата Прикреплено изображение (Нажмите для увеличения)
(Отредактировано автором: 28 Января, 2018 - 20:20:14)
|