Css 引导5根据导航栏高度向下推柱_Css_Twitter Bootstrap_Bootstrap 5

Css 引导5根据导航栏高度向下推柱

css twitter-bootstrap

Css 引导5根据导航栏高度向下推柱,css,twitter-bootstrap,bootstrap-5,Css,Twitter Bootstrap,Bootstrap 5,如何根据导航栏的高度按下最左边的列a位置固定，导航栏的顶部固定这是我的HTML： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

如何根据导航栏的高度按下最左边的列a

位置固定

，导航栏的顶部固定

这是我的HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <style>
        html,
        body {
            height: 100%!important;
        }
        .navbar-brand img {
            filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
        }
    </style>

    <style>
        .scrollable {
            overflow: hidden;
            height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
        }

        .scrollable:hover {
            overflow: auto;
        }

        ::-webkit-scrollbar {
            width: 3px;
            height: 3px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-track {
            background-color: #FEFEFE;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #6c757d;
        }
    </style>

    <title>BS5 Layout</title>
</head>

<body class="bg-light">

    <header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
        <div class="col-12 col-md-3 col-lg-2">
            <a class="navbar-brand text-primary px-2" href="#">
                <img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
                Brand
            </a>
        </div>
        <nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
            <ol class="breadcrumb mt-3 px-2">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Contacts</a></li>
                <li class="breadcrumb-item active" aria-current="page">List</li>
            </ol>
        </nav>
    </header>

    <div class="container-fluid h-100">
        <div class="row h-100">
            <section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
                This won't scroll all the way to bottom?!?
                item<br>
                ...
                Last item
            </section>
            <section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
                Repeat this content and navbar disappears after X number of scrolls<br>
                ...
                Last line<br>
            </section>
            <section class="h-100 col-md-4 col-lg-3 p-0 border-start">
                SIDE
            </section>
        </div>
    </div>

</body>
</html>


html，
身体{
身高：100%！重要；
}
.navbar品牌img{
滤镜：反转（65%）深褐色（91%）饱和色（7314%）色调旋转（210度）亮度（101%）对比度（98%）；
}
.可滚动{
溢出：隐藏；
高度：100%！重要；/*否则我们必须在可滚动部分使用h-100*/
}
.可滚动：悬停{
溢出：自动；
}
：-webkit滚动条{
宽度：3倍；
高度：3倍；
背景色：#F5；
}
：-webkit滚动条轨迹{
背景色：#fefe；
}
：-webkit滚动条拇指{
背景色：#6c757d；
}
BS5布局


列表
这不会一直滚动到底？！？
项目

...
最后一项
重复此内容，X次滚动后导航栏消失

...
最后一行

一边

提前感谢：）

由于导航已固定，因此需要车身垫料
固定导航栏将覆盖您的其他内容，除非您添加填充到顶部。尝试你自己的价值观或使用我们的下面的片段。提示：默认情况下，导航栏的高度为50px

在引导程序之后包括这一行！还有
我已经试过了…但是如果导航栏改变了高度，比如字体大小增加，会发生什么呢？此外，即使是硬编码，左列列表也不会滚动到底部…我看不到最后一行？？最好的解决方案似乎是在每列的顶部复制导航栏…这会将内容向下推，不会导致左列不显示最后一行项目…当然这感觉很恶心，但效果不错？！？没有使用JS来计算高度-但这会导致像我在之前的评论中所说的问题？你是对的，如果导航的高度发生变化，我们也需要改变身体的填充。到目前为止，我已经在每列的顶部贴上了两个幻影DIV。我将每一个的高度设置为57px，这非常有效，直到导航栏发生变化。我可以使用一些JS来获取高度，并在飞行中设置那些DIV的高度…似乎有点黑客。我希望有一个特定于CSS的解决方案：o可能只是在这一点上破解它…似乎是徒劳的
body { padding-top: 70px; }