Question

我正在尝试创建一个全屏布局，该页面使用粘性的页眉和页脚以及主要内容区域中的可单独滚动的列来占据视口的100％。

我已经尝试在各种行和列上使用.h-100和.flex-grow-1，但是我无法完全使用它。我最近来的是将h-100添加到容器和中间行，但这将页脚推离屏幕底部。

# currently works for grabbing the first line of the file
# doesn't work for each line after.
install_modules() {
    declare -A regex

    regex["module"]='\[submodule "(.*)"\]'
    regex["url"]='url = "(.*)"'
    regex["branch"]='branch = "(.*)"'

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    cat < ".gitmodules" | while read -r LINE; do
        if [[ $LINE =~ ${regex[module]} ]]; then
            PATH=${BASH_REMATCH[1]}

            echo "$PATH"
        fi
    done
}

我可以使它仅与一列一起工作，但是添加多于一列会破坏我不了解的布局。

Answer 1

制作容器d-flex，然后使用flex-grow-1使内容区域填充高度。您还需要在导航栏和页脚上使用flex-shrink-0，以免它们的高度“压缩”。

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

演示：https://www.codeply.com/go/ouc3hddx5i

相关：
Use remaining vertical space with Bootstrap 4
Bootstrap 4.0 - responsive header with image + navbar + full-height body

Bootstrap-如何使用可滚动列创建全屏布局？

1 个答案: