Jump to content
  • Sign Up

Шапка и 100% DIV


Recommended Posts

Наверно, все просто: подскажите, пожалуйста, как реализовать такое: нужна фиксированная шапка и две области под ней: слева аля меню, в ней может быть прокрутка. И справа - вторая область, 100% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.

Q1.png

Link to post
Share on other sites

Да, но у меня Div для содержимого образует прокрутку на высоту шапки, а так же образуется горизонтальная прокрутка.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <style>
                html, body {                        
                        margin: 0px;
                        height: 100%; 
                }             
                #main-header {                      
                        background: #fafafb;
                        height: 32px;
                        vertical-align: middle;
                        -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                        -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                        box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
                }             
                #main-header p {
                        margin-left: 20px;
                        font-weight: 600;
                }
                #main-container {
                        background: yellow;
                        height: 100%
                }
                .div1 {    
                        width: 350px;
                        background: #ccc;
                        float: left;
                        height: 100%
                }
                .div2{    
                        width: 100%;                      
                        background: #c00;   
                        margin-left: 350px;
                        height: 100%
                }             
        </style>
</head>
<body>
        <header id="main-header">
                <p>Заголовок</p>
        </header >
        <div id="main-container">
                <div class="div1">div1</div>
                <div class="div2">div2</div>
        </div>
</body>
</html>

 

Edited by Online
Link to post
Share on other sites

Почитайте про 
box-sizing
вместо float, используйте flex
и могут пригодится единицы измерения vh для высоты. 

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Link to post
Share on other sites

Спасибо. Сделал вот так. Но если в первом блоке "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> 

 

Edited by Online
Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    46,971
    Total Members
    1,451
    Most Online
    Morwinus
    Newest Member
    Morwinus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Tucha
      Первые шаги в облаке: наглядная инструкция по работе на виртуальном сервере Друзья, привет. Нередко сразу после перехода в облако возникают вопросы: как осуществить основные настройки на сервере и работать непосредственно с самой виртуальной машиной и панелью управления сервером? Мы подготовили пошаговую наглядную инструкцию для простого и понятного старта работы с виртуальной машиной https://tucha.ua/ru/blog/support/pervye-shagi-v-oblake-naglyadnaya-instrukciya-po-rabote-na-virtualnom-servere. Из статьи вы узнаете о том, как: ·       получить реквизиты доступа к машине; ·       подключиться к серверу; ·       изменить пароль; ·       установить обновления; ·       распределить дисковое пространство и о других полезных возможностях, которые помогут грамотно использовать сервер для насущных потребностей бизнеса. Инструкция пригодится, если вы только начали или вскоре планируете работу в облаках. Пользуйтесь! А если возникнут дополнительные вопросы или нужна наша помощь, обращайтесь: пишите на почту [email protected] или звоните по телефону +380 44 583-5-583. Мы на связи 24×7!      
    • andreyvorobey1989
      Спасибо конечно но мне дешевле сделали. Скопировали + настроили заявки + установили панель управления. Счетчик метрики поставили бесплатно. Правда я и сам бы смог поставить счетчик это же минутное дело.  
    • Дмитрий Измайлов
      Давненько от нас не было интересных новостей, поэтому возвращаемся с интересной акцией! 🙂 При заказе VPS сервера в период с 24 по 30 октября получайте скидку 50% на заказ услуг:  Сингл Мастер - 2Gb RAM, 20GB SSD, 2 vCore - цена по скидке 299 руб. Тим Спирит - 4Gb RAM, 40GB SSD, 3 vCore - цена по скидке 595 руб. Суприм Мастер - 6Gb RAM, 40GB SSD, 4 vCore - цена по скидке 895 руб. Black Titan - 8Gb RAM, 60GB SSD, 5 vCore - цена по скидке 1270 руб. Silver Oversun - 12Gb RAM, 80GB SSD, 6 vCore - цена по скидке 1795 руб. Gold Reserve - 16Gb RAM, 100GB SSD, 7 vCore - цена по скидке 2270 руб. Only Platinum - 32Gb RAM, 120GB SSD, 8 vCore - цена по скидке 3395 руб. ...и все его дополнения: дополнительный объем SSD/SAS, CPU, RAM, IP-адреса! Скидка 50% действует на аренду сервера на первые 3-х месяца, далее по обычной цене.   Промо-код: TMXJOS5 Все VPS сервера размещаются на SSD накопителях и процессорах Intel Xeon E5-2695v2. Дата-центр Санкт-Петербург. Добро пожаловать в SerfStack.com!
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...