Jump to content
  • Sign Up

Шапка и 100% DIV

Online
 Share
Followers 1

Recommended Posts

Online

Online 0

Posted
    Posted

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

    Q1.png

    Link to post
    Share on other sites
    Online

    Online 0

    Posted
    • Author
    Posted (edited)

    Да, но у меня 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
    npofopr

    npofopr 423

    Posted
      Posted

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

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

      Link to post
      Share on other sites
      Online

      Online 0

      Posted
      • Author
      Posted (edited)

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

      ×
       Share
      Followers 1
      Go to topic listing

      • Member Statistics

        47,097
        Total Members
        1,451
        Most Online
        Mikhail30
        Newest Member
        Mikhail30
        Joined

      • Recently Browsing   0 members

        No registered users viewing this page.

      ×
        ×
        • Create New...