Blazor, CSS 잘 아시는 분들에게 도움을 요청합니다.

[Bluehill]

(저 밑에 Copyright 부분을 옮기고 싶습니다.)

Blazor MainLayout에서 저 하단 부분(bottom-row)을 페이지가 짧을 때에는 화면 맨 하단에, 페이지가 길 때에는 페이지 맨 하단에 붙이는 방법 어디 없나요? 스택 오버플로우 답변들을 다 시도해 봤는데 작동이 안되거나 제가 원하던게 아니거나 하더군요. 조건은 이렇습니다.

1. 페이지가 짧을 때(스크롤바가 없을 때)는 화면 맨 하단에 붙어야 함
2. 페이지가 길 때(스크롤바가 있을 때)는 페이지 맨 하단에 붙어야 함
3. bottom-row가 페이지 내용을 가리면 안됨

소스 코드는 여기에 있습니다.

[dimohy]

Google 페이지에서 사용한 것을 살펴보면,

아래 대한민국 – 검정 영역이죠. 이것이 어떻게 자연스럽게 하단에 붙었는지 조사해보면,

display: flex로 세로 구역이 나눠져 있고 가장 하단이 바닥에 붙게 하기 위에 바로 윗 영역이

flex-grow: 1로 되어 있음을 알 수 있습니다.

여러가 지 방법이 있겠지만 이 방식이 Google의 메인 페이지에서 사용하는 방식이니… 쓸만하실 듯 합니다.

[Bluehill]

해결했습니다. 이 스택 오버플로우 답변이 도움이 되었네요. 코드를 다음과 같이 고치니까 되었습니다.

<div class="page">
    <main>
        <div class="flex-wrapper">
            <div class="top-row px-4">
                <CultureSelector />
                <NavLink href=".">@Loc["Home"]</NavLink>
                <NavLink href="howtouse">@Loc["HowToUse"]</NavLink>
                <NavLink href="tryjosa">@Loc["TryJosa"]</NavLink>
                <NavLink href="trychar">@Loc["TryChar"]</NavLink>
                <NavLink href="changelog">@Loc["ChangeLog"]</NavLink>
            </div>

            <article class="content px-4">
                @Body
            </article>

            <div class="bottom-row px-4">
                Copyright © Bluehill 2024
            </div>
        </div>
    </main>
</div>

.flex-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
}

.content {
    margin-left: auto;
    margin-right: auto;
}

.bottom-row {
    background-color: #f7f7f7;
    border-top: 1px solid #d6d5d5;
    justify-content: flex-start;
    height: 3.5rem;
    display: flex;
    align-items: center;
    margin-top: auto;
}

[Bluehill]

답변 감사합니다. 이 답변하고 조합하니까 이 방법으로도 되긴 하더라고요.