保持内部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

我看不到您的图片，但据我所见，您需要在.text-outer中制作background-size：cover并删除.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-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>