React JS - 应用程序没有填满整个页面

Question

I am using React JS. I have 3 components:

1. nav
2. div
3. section

Folders:

• (Folder: Navbar.js, Navbar.scss)
• (Folder: MyDivSection.js, MyDivSection.scss)
• (Folder: MySection.js, MySection.scss)
• App.js (where all of the above components are called)
• index.js ( ReactDOM.render(, document.getElementById('root')); )

Here is the layout of my page:

There is a white/empty area at the bottom of the page, that I want to get rid of using sass/css ?

How to achieve that ?

Note: The white/empty area appears only in 768px, 480px and 1200px resolutions

Answer 1

If I understood the problem, Then you would have menu=nav , Content=div and section=footer.

Then the height of the menu should be fixed where the content and footer could be in %. this is the problem you are getting.

You need to increase the content so that it fills the white secion

Here is how I would do it.

 .app{ display:inline-block; width: 98vw; height:95vh; } .app> div{ width:100%; } .app .nav{ background:red; height:30px; } .app .content{ background:blue; height:75%; } .app .footer{ background:green; height:20%; }

 <div class="app"> <div class="nav">nav</div> <div class="content">div</div> <div class="footer">section</div> </div>

Answer 2

尝试阅读有关flexbox的一般信息，但这里有一些方便的布局示例可能会对您有所帮助