html - 如何将页面内容扩展到屏幕底部

Question

我在 Joomla 网站上工作，我在将页面扩展到屏幕底部时遇到问题。这是页面的图片:页面 html:

<div id="free_trial_page">
  <div id="free_trial_container">
    <div id="free_title_block"><p id="free_title_text">Welcome to the <span class="hilite_text">Free</span>Introductory Course</p></div>
    <div id="free_title_block"><p id="free_title_text">ยินดีต้อนรับ สู่ คอร์สทดลองเรียน <span class="hilite_text">ฟรี</span>ไทย</p></div>
    <div id="free_item"  class="free_items">
        <p class="free_content_title"> We hope you will enjoy learning English in these pages</p>
         <p class="free_content_title">เราหวังว่าท่านจะสนุกกับการเรียนภาษาอังกฤษจากหน้าเหล่านี่</p>
        <p class="free_content">Please click thumbnails to see videos</p>
        <p class="welcome_vids">
          <span><a id="welcome_vids" href="index.php/sg-video-2"><img src="/templates/beez_20/images/ws_wst2.png" width="160" height="90"></a></span>        
         ....   
        </p>
        <p class="welcome_vids">
          <span><a id="welcome_vids" href="index.php/sg-video-2"><img src="/templates/beez_20/images/ws_wst2.png" width="160" height="90"></a></span>        
         ....
        </p>         
      </div>
   </div>
 </div>

页面上没有页脚。我试过按照网上的建议将最小高度设置为 100%，但这没有用，我不确定要将它附加到哪个 div。页面上没有页脚。有什么建议吗？

Answer 1

您可以使用vh 单位。将您的高度设置为 100vh，您的 div 将适合您的页面屏幕。