Fixed Div innerhalb div mit anderen div scrolling

Es tut mir sehr leid für die unklare Titel, aber ich weiß nicht, wie man es in einem Titel beschreiben.Fixed Div innerhalb div mit anderen div scrolling

Ich habe eine 2 divs in einer Inhaltsschicht. 1 div möchte ich bleiben, das andere div ich möchte scrollen können und ich bin nicht in der Lage, es selbst zu tun.

Hier ist eine kleine Geige;

.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>

Hier ist ein Beispiel dafür, wie die reale Sache aussehen würde:

ich den Header in dem ersten Bild wollen an seinem Platz zu bleiben, während alles andere Ich möchte in der Lage sein, nach unten zu scrollen.

Es muss ein bisschen wie diese Frage sein: link aber dass die Bildlaufleiste nicht in die Fußzeile oder in diesem Fall die Kopfzeile erstreckt.

Gibt es eine Möglichkeit, das ist möglich?

Quelle

2016-12-22 Paul de Koning

versuchen Sie dies:

.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>

Quelle

2016-12-22 10:13:16 Abood

Ah es irgendwie funktioniert, wenn ich Breite hinzugefügt: 100%; zu .content aber die Spitze: 17%; funktioniert nicht wirklich, ich brauche es automatisch unter die .header zu gehen. Kann ich das irgendwie machen? –

Überprüfen Sie die aktualisierte Antwort – Abood

Danke! Ich teste es nur auf meiner echten Website und dann markieren Sie Ihre Antwort als beantwortet, wenn es funktioniert: D –

Fixed Div innerhalb div mit anderen div scrolling

Antwort

Verwandte Themen