Исправлено div внутри div с прокруткой прокрутки div

Мне очень жаль неясное название, но я не знаю, как описать его в заголовке.Исправлено div внутри div с прокруткой прокрутки div

У меня есть 2 div внутри слоя контента. 1 div Я хочу остаться неподвижным, другой div, который я хочу, чтобы прокручивать, и я не могу сделать это сам.

Вот небольшая скрипка;

.contentlayer { 
 
    text-align: center; 
 
} 
 
.innerlayer { 
 
    animation: fadein 2s; 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: dodgerblue; 
 
    min-width: 50%; 
 
    max-width: 50%; 
 
    border: 1px solid black; 
 
    height: auto; 
 
    overflow-y: auto; 
 
    max-height: 80%; 
 
} 
 
.header { 
 
    position: fixed; 
 
} 
 
.content { 
 

 
}

<html> 
 
    <head> 
 
     <title>Css Static Test</title> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 
    <body> 
 
     <div class="innerlayer"> 
 
      <div class="contentlayer"> 
 
       <div class="header"> 
 
        I want this div to stay in place. but also stay in the same position as if it weren't fixed, this will be a header. 
 
       </div> 
 
       <div class="content"> 
 
        test 
 
        <script> 
 
         for(i = 0; i < 100; i++) { 
 
          document.write("<br>"); 
 
         } 
 
        </script> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

Вот пример того, как реальная вещь будет выглядеть так:

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

Это должно быть немного похоже на этот вопрос: link, но что полоса прокрутки не распространяется на нижний колонтитул или в этом случае заголовок.

Можно ли это сделать?

источник

2016-12-22 Paul de Koning

попробовать это:

.contentlayer { 
 
    text-align: center; 
 
} 
 
.innerlayer { 
 
    animation: fadein 2s; 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: dodgerblue; 
 
    min-width: 50%; 
 
    max-width: 50%; 
 
    border: 1px solid black; 
 
    height: 80%; 
 
} 
 
.header { 
 
    position: fixed; 
 
    height:15%; 
 
    width:100%; 
 
    background:#f00; 
 
} 
 
.content { 
 
    bottom:0; 
 
    overflow-y:auto; 
 
    height:80%; 
 
    width:100%; 
 
    position:fixed; 
 
}

<html> 
 
    <head> 
 
     <title>Css Static Test</title> 
 
    </head> 
 
    <body> 
 
     <div class="innerlayer"> 
 
      <div class="contentlayer"> 
 
       <div class="header"> 
 
        I want this div to stay in place. but also stay in the same position as if it weren't fixed, this will be a header. 
 
       </div> 
 
       <div class="content"> 
 
        test 
 
        <script> 
 
         for(i = 0; i < 20; i++) { 
 
          document.write("<br>line"+i); 
 
         } 
 
        </script> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-12-22 10:13:16 Abood

Ах он работал вроде, когда я добавил ширина: 100%; к .content, но верх: 17%; действительно не работает, мне нужно, чтобы он автоматически попадал под .header. Как я могу это сделать? –

проверить обновленный ответ – Abood

Спасибо! Я просто тестирую его на своем реальном сайте, а затем iil отмечаю ваш ответ, если он отвечает, если он работает: D –

Исправлено div внутри div с прокруткой прокрутки div

ответ

Смежные вопросы