如何使內部元素適合父親

Question

我似乎無法找到一種方法來使內部元素與其父母適合/調整大小。當前的代碼如下所示：

頁面元素最終看起來像這樣和我調整是固定的寬度。

Answer 1

可以使用position: absolute爲孩子和position: relative（不要忘記它）爲其父。

There is多於一個的解決方案，但我使用上述

這種技術例如：

.parent { 
 
    position: relative; 
 
    background-color: #d3d3d3; 
 
    border: 1px solid black; 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color: red; 
 
    border: 5px solid green; 
 
    box-sizing: border-box; 
 
    width: 90%; 
 
    height: 90%; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>