flexbox 和引导卡的填充高度

Question

I have a page using Bootstrap containers and cards. I am trying to get .card-body to fill the full height of the screen but the height ends after the end of the content. Here is a fiddle demonstrating the problem. Fiddle

 .page-container { min-height: 100vh; }.main-content { min-height: calc(100vh - 0px); -webkit-box-flex: 1; flex-grow: 1; }.container { width: 100%; }.card { display: flex; flex-direction: column; }.card-body { -webkit-box-flex: 1; flex: 1 1 auto; background: #ccc; }

 <div class="page-container"> <div class="main-content"> <div class="container form-container"> <div class="card"> <div class="card-body"> This should be full height! </div> </div> </div> </div> </div>

Answer 1

All containers under .main-content have no heights defined. So why would .card-body be full height? (Note that in HTML/CSS, most elements are height: auto by default. )

You could either add heights to the nested containers, or add display: flex , which will give the children full height through the align-items: stretch default .

 .page-container { min-height: 100vh; }.main-content { min-height: calc(100vh - 0px); flex-grow: 1; display: flex; /* new */ }.container { flex: 1; /* new; for width; */ display: flex; /* new */ }.card { flex: 1; /* new */ display: flex; flex-direction: column; }.card-body { flex: 1 1 auto; background: #ccc; } body { margin: 0; }

 <div class="page-container"> <div class="main-content"> <div class="container form-container"> <div class="card"> <div class="card-body"> <b>This is now full height!</b> </div> </div> </div> </div> </div>