提前感謝您的時間和關注。這里是新手開發人員，試圖完成 React 組件的布局。我正在使用引導程式并根據需要添加 css。該組件本質上是一個單列頁面，帶有一個動態呈現內容的主要子組件。我的問題是，當動態組件的高度不足以將其推到那里時，我無法將頁腳保留在頁面底部。當動態組件呈現一定數量的子級時，頁腳被正確定位，但這只是因為它被推送到頁面底部。我附上了截圖來演示。
My current strategy for solving this is to try to use a spacer to push the footer to the bottom of the viewport with the flex-grow property but I can't get the spacer to expand when I need it to. Concerning what I've tried thus far, I've read widely on stack overflow and I've been working on this on and off for a couple of days and I've tried a fair few iterations of different css properties and Bootstrap classes, including margin-top-auto, various position settings and others. I'm tearing my few remaining hairs out over this, so super grateful for any help. Some relevant code is as follows:
App.js
return (
<div className="d-flex flex-column">
<Header />
<SearchBar data={state} handler={filterRes} />
<CurrencyContainer
loading={loading}
error={error}
errorMessage={errorMessage}
data={data}
pagData={currentPageData}
/>
{!loading && data.length > 25 && !error && (
<PaginationComp pageCount={pageCount} clickHandler={handlePageClick} />
)}
<div className="spacer flex-grow">spacer</div> //The spacer is here for now but I'll move this into a component when I get it working
<Footer />
</div>
);
}
I've also tried to add .css properties via class names and these are showing up in the console but not affecting the display of the page.
The current css properties I've applied are below, though as I say, I've tried various combinations to no effect.
body {
display: flex;
flex-direction: column;
height: 100%;
align-content: stretch;
}
.spacer {
background-color: lightgreen;
flex-grow: 3;
}
footer {
width: 100%;
height: 150px;
background-color: var(--blue-yonder-light);
border-top: var(--blue-yonder) 1px solid;
}
Happy to provide more code as required. This problem feels super amateurish but I'm sufficiently stuck to ask for help, so thanks in advance for any advice.
uj5u.com熱心網友回復：
好的，所以你是在正確的軌道上。你不需要任何型別的墊片。
您需要為 flex 容器設定最小高度，如下所示。
<div className="d-flex flex-column" style={{min-height: '100vh}}>
這是一個復制最少的例子。Stakblitz 解決方案
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338057.html