自动引导屏幕适合高度内容

Question

我正在使用引导程序并尝试将内容放在屏幕上（没有滚动条）并根据它进行自动调整。我尝试将 html、正文和容器高度设置为 100% 并添加溢出但无法访问。例如，当有人将浏览器缩小时，它会自动调整高度，目前仅宽度有效

<div class="container-fluid">       
        <div class="row">
          <div class="col-xs-12 col-md-3">
                <div class="sidebar_container">
                    <div class="logo_container">
                        <img class="logo_img" src="img/logo_bg.png" alt="" title="" />
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
          </div>
         <div class="col-xs-12 col-md-9 main-content">

                <div class="row section1">
                    <div class="col-xs-12 col-md-6 left">
                            <h4 class="header_title desktop">Feature One</h3>
                            <p class="btns desktop"><a class="link"  href="#"><button  class="f_button">Find out more</button ></a></p> 
                    </div>
                    <div class="col-xs-12 col-md-6 right"> 
                        <img src="img/section1_bg.png" class="bg_image">
                        <h4 class="header_title mobile">Feature One</h3>
                        <p class="btns mobile"><a class="link" href="#"><button class="f_button">Find out more</button></a></p>
                    </div>
                </div>

                <div class="row section2">
                    <div class="col-xs-12 col-md-9 left"><img src="img/section2_bg.png" class="bg_image"></div>
                    <div class="col-xs-12 col-md-3 right">                          
                            <h4 class="header_title">Feature Two</h3>
                            <p><a class="link" href="#"><button class="f_button">Find out more</button></a></p> 
                    </div>
                </div>

                <div class="row section3">
                    <div class="col-xs-12 col-md-3 left">
                            <h4 class="header_title desktop">Feature Three</h3>
                            <p class="btns desktop"><a class="link"  href="#"><button  class="f_button">Find out more</button></a></p>              
                    </div>
                    <div class="col-xs-12 col-md-9 right">
                        <img src="img/section3_bg.png" class="bg_image">
                        <h4 class="header_title mobile">Feature Three</h3>
                        <p class="btns mobile"><a class="link" href="#"><button class="f_button">Find out more</button></a></p>
                        </div>
                </div>

                <div class="row section4">
                    <div class="col-xs-12 col-md-8 left">
                    <img src="img/section4_bg.png" class="bg_image">
                    </div>
                    <div class="col-xs-12 col-md-4 right">
                            <h4 class="header_title">Feature Four</h3>
                            <p><a  class="link" href="#"><button  class="f_button">Find out more</button ></a></p>  

                    </div>
                </div>

         </div>
    </div>

</div>

Answer 1

尝试增加高度：100vh；到每个部分。喜欢

<style>
.sectionHeight {
height:100vh;
}
</style>

<div class="row section2 sectionHeight">
                    <div class="col-xs-12 col-md-9 left"><img src="img/section2_bg.png" class="bg_image"></div>
                    <div class="col-xs-12 col-md-3 right">                          
                            <h4 class="header_title">Feature Two</h3>
                            <p><a class="link" href="#"><button class="f_button">Find out more</button></a></p> 
                    </div>
                </div>

------------------

等等