29

Вопрос по css3, html5, css, html – Фиксированный верхний и нижний колонтитулы и боковые панели с прокруткой области содержимого в центре

Начиная с этогоДемо-шаблонЯ хотел бы создать этот макет:

enter image description here

Но у меня есть следующие проблемы:

  • The two sidebars are not contained inside the scrollable content div.
  • The content div does not take a fixed size
  • The scrollable content does not present a scrollbar when it overflows
  • It is preferred if the browser's main scrollbar is used

Может кто-нибудь помочь мне решить эти проблемы?

  • Да и нет (ну, не в том количестве времени, которое у меня есть). Использование главной полосы прокрутки браузера делает так, что боковые панели также прокручиваются. Это может быть хорошо с вами, я не уверен. Я добавил пример jsFiddle в свой ответ.

    от
  • Большое спасибо, приятель. Гость. Можно ли прокрутить прокручиваемый div снаружи div? Я имею в виду, где бы вы ни прокручивали страницу, я хочу, чтобы она прокручивала прокручиваемый div. Это возможно?

    от glarkou
  • это было идеально для того, что я пытался сделать. Спасибо

    от
  • Рад, что смог помочь :)

    от
  • Спасибо за публикацию вашего ответа! Обратите внимание, что вы должны опубликовать полезные пункты ответа здесь, на этом сайте, или ваша публикация может быть удаленаSee the FAQ where it mentions answers that are 'barely more than a link', Вы можете по-прежнему включать ссылку, если хотите, но только в качестве «ссылки». Ответ должен стоять самостоятельно, без необходимости ссылки.

    от
  • Еще раз спасибо, приятель.

    от glarkou
  • Спасибо, я буду помнить отныне.

    от
  • 1

    Add 2

    EDIT
    1.Addposition собственность какabsolute для div, который вы хотите исправить.
    2. держать телоoverflow имуществоauto.

    Примечание: установка z-индекса тела в -1 сделает остальную часть тела недоступной.
    Ссылка :http://limpid.nl/lab/css/fixed/

  • 35

    При этом используются несколько новых функций CSS

    Using display:grid

    которые могут поддерживаться или не поддерживаться в выбранном вами браузере. Они включаютМакет сетки, Переменные CSS, а такжеposition:sticky, Переменные CSS можно обойти со статическими значениями и Grid /position:sticky может изящно ухудшаться с@supports.

    /* Remove unnecessary margins/padding */
    html, body { margin: 0; padding: 0 }
    
    .wrapper {
      display: grid;
      /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
      grid-template-areas:
        "header header header header header"
        "empty_left sidebar_1 content sidebar_2 empty_right"
        "footer footer footer footer footer";
      /* Only expand middle section vertically (content and sidebars) */
      grid-template-rows: 0fr 1fr 0fr;
      /* 100% width, but static widths for content and sidebars */
      grid-template-columns: 1fr 100px 400px 100px 1fr;
      /* Force grid to be at least the height of the screen */
      min-height: 100vh;
    }
    .header {
      grid-area: header;
    
      /* Stick header to top of grid */
      position: sticky;
      top: 0;
      /* Ensure header appears on top of content/sidebars */
      z-index: 1;
    
      /* General appearance */
      background-color: #FCFF34;
      text-align: center;
      font-size: 1rem;
      line-height: 1.5;
      padding: 1rem;
    }
    /* Save header height to properly set `padding-top` and `margin-top` for sticky content */
    :root {
      --header-height: calc(1rem * 1.5 + 1rem * 2);
    }
    
    .sidebar-1 {
      grid-area: sidebar_1;
    }
    .sidebar-2 {
      grid-area: sidebar_2;
    }
    .sidebar-1,
    .sidebar-2 {
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
    
      /* Styling to match reference */
      background-color: #BC514F;
    }
    
    .content {
      grid-area: content;
    
      /* General appearance */
      background-color: #99BB5E;
    }
    .footer {
      grid-area: footer;
    
      /* Stick footer to bottom of grid */
      position: sticky;
      bottom: 0;
    
      /* General appearance */
      background-color: #FCFF34;
      text-align: center;
      font-size: .8rem;
      line-height: 1.5;
      padding: .5rem;
    }
    /* Save footer height to properly set `bottom` and `min-height` for sticky content */
    :root {
      --footer-height: calc(.8rem * 1.5 + .5rem * 2);
    }
    
    .sticky-spacer {
      flex-grow: 1;
    }
    .sticky-content {
      position: sticky;
      bottom: var(--footer-height);
      min-height: calc(100vh - var(--footer-height));
      box-sizing: border-box;
    
      --padding: 10px;
      padding:
        calc(var(--header-height) + var(--padding))
        var(--padding)
        var(--padding);
      margin-top: calc(0px - var(--header-height));
    }
    <div class="wrapper">
    <div class="header">Header (Absolute)</div>
    <div class="sidebar-1">
      <div class="sticky-spacer"></div>
      <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
    </div>
    <div class="content">
      <div class="sticky-spacer"></div>
      <div class="sticky-content">
        Scrollable content<br><br>
        line 1<br><br>
        line 2<br><br>
        line 3<br><br>
        line 4<br><br>
        line 5<br><br>
        line 6<br><br>
        line 7<br><br>
        line 8<br><br>
        line 9<br><br>
        line 10<br><br>
        line 11<br><br>
        line 12<br><br>
        line 13<br><br>
        line 14<br><br>
        line 15<br><br>
        line 16<br><br>
        line 17<br><br>
        line 18<br><br>
        line 19<br><br>
        line 20
      </div>
    </div>
    <div class="sidebar-2">
      <div class="sticky-spacer"></div>
      <div class="sticky-content">
        Sidebar 2 Absolute position, Fixed width<br><br>
      line 1<br><br>
      line 2<br><br>
      line 3<br><br>
      line 4<br><br>
      line 5<br><br>
      line 6<br><br>
      line 7<br><br>
      line 8<br><br>
      line 9<br><br>
      line 10
      </div>
    </div>
    <div class="footer">Footer (Absolute)</div>
    </div>

    Scrollbar in main content container

    В окне содержимого (включая боковые панели) можно задать любой тип ширины (процент, пиксель и т. Д.). Только прокручиваемая область содержимого будет прокручиваться (боковые панели / нижний колонтитул / заголовок просто переполняют поле). Я предлагаю добавить некоторые медиа-запросы, чтобы вырваться из боковых панелей, чтобы контент не был скрыт на небольших устройствах, или установитьmin-height на поле содержимого иmin-width наbody.

    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    header{
        width: 100%;
        background: yellow;
        position: fixed; 
        top: 0;
        height: 60px !important;
        opacity:.8;
    }
    
    .content {
        position:relative;
        height: 100%;
        width:600px; /* Sizing - any length */
        padding:60px 0 30px 0; /* Header height and footer height */
        margin:0 auto 0 auto; /* Center content */
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    .sidebar1, .sidebar2 {
        background: red;
        top:60px;
        bottom:30px;
        width: 100px;
        position:absolute;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    .sidebar1 {
        left:0;
    }
    
    .sidebar2 {
        right: 0;
    }
    
    #scrollable2 {
        background:green;
        height: 100%;
        min-width: 300px;
        margin-left: 100px;
        margin-right: 100px;
        overflow:auto;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    footer {
        width: 100%;
        background: yellow;
        position: fixed; 
        bottom: 0;
        height: 30px;
    }
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div class="content">
        <!-- Always on top. Fixed position, fixed width, relative to content width-->
        <div class="sidebar1">
            sidebar-left
        </div>
        <!-- Scrollable div with main content -->
        <div id="scrollable2">
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
        </div>
        <!-- Always on top. Fixed position, fixed width, relative to content width -->
        <div class="sidebar2">
            sidebar-right
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>

    Using the browser's main scrollbar

    Хотя использование главной полосы прокрутки браузера возможно, оно также заставляет боковые панели прокручиваться вместе со страницей.

    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    header{
        width: 100%;
        background: yellow;
        position: fixed; 
        top: 0;
        height: 60px !important;
        z-index:100;
    }
    
    .content {
        position:relative;
        min-height: 100%;
        width:600px; /* Sizing - any length */
        padding:60px 0 30px 0; /* Header height and footer height */
        margin:0 auto 0 auto; /* Center content */
    }
    
    .sidebar1, .sidebar2 {
        background: red;
        height:100%;
        width: 100px;
        top:0;
        padding-top:60px;
        position:absolute;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    .sidebar1 {
        
        left:0;
        
    }
    
    .sidebar2 {
        right: 0;
    }
    
    #scrollable2 {
        height:100%;
        background:green;
        min-width: 300px;
        margin-left: 100px;
        margin-right: 100px;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    footer {
        width: 100%;
        background: yellow;
        position: fixed; 
        bottom: 0;
        height: 30px;
    }
    <!-- Always on top: Position Fixed-->
    <header>
        header
    </header>
    <!-- Fixed size after header-->
    <div class="content">
        <!-- Always on top. Fixed position, fixed width, relative to content width-->
        <div class="sidebar1">
            sidebar-left
        </div>
        <!-- Scrollable div with main content -->
        <div id="scrollable2">
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
            content-main<br>
        </div>
        <!-- Always on top. Fixed position, fixed width, relative to content width -->
        <div class="sidebar2">
            sidebar-right
        </div>
    </div>
    <!-- Always at the end of the page -->
    <footer>
        footer
    </footer>