gpt4 book ai didi

html - 如何使列内的固定导航栏正确调整大小?

转载 作者:太空宇宙 更新时间:2023-11-04 12:12:54 26 4
gpt4 key购买 nike

我创建了一个左侧导航栏,当用户滚动时它固定在顶部,这部分工作得很好。但是,当我调整分辨率时,有时左侧导航栏会移动到主要内容的顶部,我无法弄清楚如何使用固定的 div 来防止这种情况发生。

额外的问题,如何使左侧导航栏的整个 col-md-2 列具有红色背景?

picture to explain what is going on

在 fiddle 中我没有添加顶部导航。

fiddle : http://jsfiddle.net/9ayLc825/1/

<body>
<div class=" col-md-2">
<ul class="nav nav-pills nav-stacked mainMenu ">
<li>
<a><i class="fa fa-tags fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a>
<ul class="nav nav-pills nav-stacked">
<li>xxxxxx</li>
</ul>
</li>
<li><a><i class="fa fa-cog fa-2x"></i>xxxxx</a></li>
<li><a><i class="fa fa-users fa-2x"></i>xxxxxx <span class="caret pull-right margin-top"></span></a></li>
<li><a><i class="fa fa-area-chart fa-2x"></i>xxxxxx</a></li>
</ul>

</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
MAIN
</div>
</div>
</div>

</body>

fiddle :http://jsfiddle.net/9ayLc825/

最佳答案

尝试给 html、body 宽度和高度 100%,基于使用 css 媒体查询的导航栏宽度和高度百分比,如下所示。

html,body{
height: 100%;

宽度:100%;

@media (max-width: 900px) { 

.navClass { 宽度:10%;高度:20%;//数值仅供引用

关于html - 如何使列内的固定导航栏正确调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28918857/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com