内側のdivを常に外側のdivの同じ位置に保ちます

Question

私は外側のdivに背景の画像が含まれているので、常にその形を含む必要があります。 。その形で、私は垂直にスクロール可能なテキストdivを持っています。このテキストブロックは、常に20pxのマージンを持つバックグラウンドシェイプにとどまる必要があります。

問題は、テキストブロックが形状からはずれるように奇妙なスケールです。ここで

コードされています

.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

あなたの画像は見えませんが、私が見る限り、background-size：.text-outerでカバーし、.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

あなたbackground-size100% 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>