You can post now and register later. If you have an account, sign in now to post with your account. Note: Your post will require moderator approval before it will be visible.
Спасибо. Сделал вот так. Но если в первом блоке "content-filter" будет много текста (и другого содержимого), то как сделать, чтобы прокрутка была только в нем? Сейчас прокрутка получается у всей страницы... И еще, как сделать, чтобы тень от хидера накладывалась на блоки ниже? Сейчас по сути ее и не видно. <!doctype html> <title>Example</title> <style> * { box-sizing: border-box; } body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; } #main-header { background: #fafafb; height: 40px; box-shadow: 0 3px 5px rgba(57, 63, 72, 0.4); margin-bottom: 0px; } #content-main { display: flex; flex: 1; } #content-filter { flex: 0 0 350px; order: 1; background: #D7E8D4; } #content-article { flex: 1; order: 2; } </style> <body> <header id="main-header">Header</header> <div id="content-main"> <div id="content-filter">Filter</div> <div id="content-article">Article</div> </div> </body>
Почитайте про box-sizing вместо float, используйте flex и могут пригодится единицы измерения vh для высоты. https://www.quackit.com/html/templates/css_flexbox_templates.cfm
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.