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