未覆蓋整個容器的自動高度

Question

我遇到問題，請獲取容器的高度以完全覆蓋容器中的文本。我不確定我做錯了什麼。我已將高度設置爲自動，以嘗試解決此問題，但高度仍未涵蓋所有內容。

有人看到我做錯了什麼嗎？如果有人需要觀看此直播，我可以在評論中提供網站地址。

.light-gray { 
 
    background-color: #E0E0E0; 
 
    width: 34%; 
 
} 
 
.light-gray-container { 
 
    /*margin: 100px 15% 0 15%;*/ 
 
    top: 150px; 
 
    left: 15%; 
 
    position: relative; 
 
    width: 80%; 
 
    height: auto; 
 
} 
 
#things-to-know-title { 
 
    font-size: 1.4em; 
 
    color: #000; 
 
} 
 
.things-to-know-bullets { 
 
    font-size: 1.1em; 
 
    color: #606060; 
 
    margin: 40px 15% 40px 0; 
 
    line-height: 1.6em; 
 
}

<div class="light-gray"> 
 
    <div class="light-gray-container"> 
 
    <div id="things-to-know-title">THINGS TO KNOW</div> 
 
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div> 
 
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div> 
 
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div> 
 
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div> 
 
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div> 
 
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div> 
 

 
    </div> 
 
</div>

更新的圖像：

Answer 1

你可以改變你的CSS這樣

在.light-gray-container刪除top: 150px;並添加在padding-top: 150px;.light-gray

.light-gray { 
 
    background-color: #E0E0E0; 
 
    width: 34%; 
 
    padding-top: 150px; 
 
} 
 
.light-gray-container { 
 
    /*margin: 100px 15% 0 15%;*/ 
 
    left: 15%; 
 
    position: relative; 
 
    width: 80%; 
 
    height: auto; 
 
} 
 
#things-to-know-title { 
 
    font-size: 1.4em; 
 
    color: #000; 
 
} 
 
.things-to-know-bullets { 
 
    font-size: 1.1em; 
 
    color: #606060; 
 
    margin: 40px 15% 0px 0; 
 
    line-height: 1.6em; 
 
}

<div class="light-gray"> 
 
    <div class="light-gray-container"> 
 
    <div id="things-to-know-title">THINGS TO KNOW</div> 
 
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div> 
 
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div> 
 
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div> 
 
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div> 
 
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div> 
 
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div> 
 

 
    </div> 
 
</div>

Answer 2

添加overflow:auto與類淺灰色將解決你的問題的股利。