Держите внутренний div всегда в том же положении внешнего div

Question

У меня есть внешний div с фоновым изображением, которое должно содержать его форму во все времена, потому что это нечетная форма (поэтому она не выпадает из поля зрения) , В этой форме у меня есть текстовый div, который прокручивается по вертикали. Этот текстовый блок должен оставаться в фоновом режиме с краем 20 пикселей в любое время.

Проблема заключается в том, что он весит странно, поэтому текстовый блок выпадает из формы.

Вот код:

.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

, если я правильно понял, вы должны с помощью position absolute и relative для div попробовать так:

.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

Я не могу видеть ваше изображение, но, насколько я вижу, вам нужно сделать размер фона: обложка в .text-external и удалить прописку в .text-inner. Что-то вроде этого:

.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

Try ниже кодов, сделать свой background-size в 100% 100%, вы использовали отступы как в .textinner и .textouter класса, и именно поэтому background-image, нижняя сторона не была видна.

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