Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
header .top, header .top .contact, header .bottom { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } * { padding: 0; margin: 0; } html { background: white; transition: all .33s ease-out; min-height: 101vh; overflow-y: scroll; overflow-x: hidden; } header { z-index: 2; height: 138px; width: 100%; background: #f3f3f3; vertical-align: middle; font: 14px "PT Sans"; } header .top { z-index: inherit; align-items: center; justify-content: space-between; height: 100px; width: 90%; max-width: 1100px; margin: auto; color: #212121; font-size: 15px; } header .top .logo img { height: 23px; width: auto; } header .top .contact .contact-item { height: 58px; padding-right: 20px; margin-right: 20px; border-right: 1px solid #dbdbdb; } header .top .contact .contact-item:last-child { padding: 0; margin: 0; border: none; } header .bottom { z-index: inherit; align-items: center; height: 76px; width: 90%; max-width: 1100px; margin: auto; background: #797979; color: white; } .one-screen { z-index: 1; height: 100vh; width: 100%; background: gray; }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <div class="top"> <div class="logo"><img src="img/logo.png" alt=""></div> <div class="contact"> <div class="contact-item">1</div> <div class="contact-item">2</div> <div class="contact-item">4</div> </div> </div> <div class="bottom"> <div class="menu"></div> <div class="controls"></div> </div> </header> <section class="one-screen"></section> </body> </html>
Простой
