Halten Sie das innere div immer in der gleichen Position des äußeren div

Question

Ich habe eine äußere div mit einem Hintergrundbild, das seine Form zu jeder Zeit enthalten muss wegen seiner seltsamen Form (so dass es nicht außer Sichtweite) . In dieser Form habe ich ein Text-Div, das vertikal scrollbar ist. Dieser Textblock muss zu jeder Zeit in der Hintergrundform mit einem 20-Pixel-Rand bleiben.

Das Problem ist, dass es seltsam skaliert, so dass der Textblock aus der Form fällt. Hier

ist der Code:

.textblock 
 
{ 
 
\t width: 70%; 
 
    float: left; 
 
    height: 60vh; 
 
} 
 

 
.text_outer 
 
{ 
 
\t background-image:url(../img/text_background.png); 
 
\t background-size: contain; 
 
    background-repeat: no-repeat; \t 
 
\t background-position:right; 
 
\t height:100%; 
 
\t padding:15px; 
 
} 
 

 
.text_inner 
 
{ 
 
\t background-color: #fff; 
 
    border-radius: 10px; 
 
    width: 85%; 
 
    float: right; 
 
    padding: 20px; 
 
    height: 94%; 
 
\t overflow:auto; 
 
\t position:relative; 
 
}

<div class="textblock"> 
 
     \t 
 
     <div class="text_outer"> 
 
      \t 
 
       <div class="text_inner"> 
 
       
 
       \t <h2>Title</h2> 
 
        <p> 
 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ac nisl in commodo. Suspendisse elit dolor, ornare id placerat quis, pretium quis \t \t \t massa. Morbi magna sapien, convallis at neque eu, mattis scelerisque nulla. Sed eget blandit diam. Ut gravida nibh vitae nunc accumsan tristique. Duis vitae quam eleifend, ultrices eros \t nec, viverra ligula. Sed tincidunt luctus congue. Nulla facilisi. Morbi scelerisque, velit sed fermentum pellentesque, massa tortor accumsan libero, vitae suscipit nisi ex id quam. Suspendisse elit elit, maximus at dolor sit amet, vulputate aliquam lacus. Nulla non diam nunc. Duis eget suscipit tortor. 
 
    <br><br> 
 
    Vivamus arcu purus, gravida eu venenatis vitae, pulvinar ac tortor. Mauris quis velit dictum, ultrices justo ut, facilisis ante. Duis convallis feugiat est sed efficitur. Ut id pretium elit. Maecenas venenatis rhoncus porttitor. Fusce dapibus sed arcu vel maximus. In hac habitasse platea dictumst. Sed vulputate ornare dolor, eget condimentum ligula pulvinar tincidunt. Vestibulum leo ex, ultricies id sagittis quis, dapibus dapibus odio. Aenean sodales ligula in est posuere auctor. Aliquam tristique elementum pharetra. Integer vitae tortor aliquam, venenatis dolor sit amet, pretium nisi. 
 
        </p> 
 
       
 
       </div> 
 
       
 
      </div> 
 
      
 
     </div>

Answer 1

, wenn ich das richtig verstanden habe, sollten Sie position absolute und relative für div mit versuchen, wie so:

.outer{ 

    position:Relative; 
    background:blue; 
    height:200px; 
    width:200px; 
} 
.inner{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    background:Red; 
    overflow: scroll; 
} 

https://jsfiddle.net/ngh99ura/4/

Answer 2

Ich kann Ihr Bild nicht sehen, aber soweit ich sehe, müssen Sie Hintergrundgröße: Cover in .text-outer und Padding im .text-Inneren zu löschen. Etwas wie folgt aus:

.text_outer 
    { 
     background-image:url('../img/text_background.png'); 
     background-size: cover; 
     background-repeat: no-repeat; 
     background-position:right; 
     height:100%; 
     padding:15px; 
    } 

    .text_inner 
    { 
     background-color: #fff; 
     border-radius: 10px; 
     width: 85%; 
     float: right; 
     height: 94%; 
     overflow:auto; 
     position:relative; 
    } 

Answer 3

Versuchen unten Codes, machen Sie Ihre background-size als 100% 100%, haben Sie verwendet Polsterung sowohl .textinner und .textouter Klasse und deshalb background-image, Unterseite nicht sichtbar war.

.textblock 
 
{ 
 
\t width: 70%; 
 
    float: left; 
 
    height: 60vh; 
 
} 
 

 
.text_outer 
 
{ 
 
\t background-image:url("https://source.unsplash.com/random"); 
 
\t background-size: 100% 100%; 
 
    background-repeat: no-repeat; \t 
 
\t background-position:top; 
 
    width:100%; 
 
\t height:100%; 
 
\t padding:15px; 
 
} 
 

 
.text_inner 
 
{ 
 
\t background-color: #fff; 
 
    border-radius: 10px; 
 
    width: 85%; 
 
    padding: 10px; 
 
    height: 94%; 
 
\t overflow:auto; 
 
\t position:relative; 
 
    margin:auto; 
 
}

<div class="textblock"> 
 
     \t 
 
     <div class="text_outer"> 
 
      \t 
 
       <div class="text_inner"> 
 
       
 
       \t <h2>Title</h2> 
 
        <p> 
 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ac nisl in commodo. Suspendisse elit dolor, ornare id placerat quis, pretium quis \t \t \t massa. Morbi magna sapien, convallis at neque eu, mattis scelerisque nulla. Sed eget blandit diam. Ut gravida nibh vitae nunc accumsan tristique. Duis vitae quam eleifend, ultrices eros \t nec, viverra ligula. Sed tincidunt luctus congue. Nulla facilisi. Morbi scelerisque, velit sed fermentum pellentesque, massa tortor accumsan libero, vitae suscipit nisi ex id quam. Suspendisse elit elit, maximus at dolor sit amet, vulputate aliquam lacus. Nulla non diam nunc. Duis eget suscipit tortor. 
 
    <br><br> 
 
    Vivamus arcu purus, gravida eu venenatis vitae, pulvinar ac tortor. Mauris quis velit dictum, ultrices justo ut, facilisis ante. Duis convallis feugiat est sed efficitur. Ut id pretium elit. Maecenas venenatis rhoncus porttitor. Fusce dapibus sed arcu vel maximus. In hac habitasse platea dictumst. Sed vulputate ornare dolor, eget condimentum ligula pulvinar tincidunt. Vestibulum leo ex, ultricies id sagittis quis, dapibus dapibus odio. Aenean sodales ligula in est posuere auctor. Aliquam tristique elementum pharetra. Integer vitae tortor aliquam, venenatis dolor sit amet, pretium nisi. 
 
        </p> 
 
       
 
       </div> 
 
       
 
      </div> 
 
      
 
     </div>