【问题标题】:Bootstrap fixed navbar : padding-top and body 100%Bootstrap 固定导航栏:padding-top 和 body 100%
【发布时间】:2012-08-10 09:15:13
【问题描述】:

对于客户,我必须做全屏网站,响应式设计。我正在使用带有固定导航栏的 Bootstrap,所以为了放置我的内容,我在正文中添加了一个 60px 的 padding-top。

这是我的问题:滚动条系统显示,因为我的身体有 100% 的高度和 60 像素的 padding-top。我可以使用“溢出:隐藏;”,但是如果我需要滚动页面,我就不能了。

你有解决办法吗?

谢谢!

编辑:这是想法:http://jsfiddle.net/StFca/ 在这种情况下,我希望隐藏滚动条,因为不需要它。

【问题讨论】:

    标签: html css twitter-bootstrap


    【解决方案1】:

    您可以将margin-top: 60px 属性添加到可以添加到内容的主容器中的新类或ID,而不是向正文添加填充,因此它看起来像这样:

    #main-container {
        margin-top: 60px;
    }
    

    这样,您可以通过将容器本身推离它而不是文档正文来容纳导航栏,滚动条将消失。

    【讨论】:

    • 是的,但这是同样的问题,系统溢出=/
    • @JérémyDutheil 这是我使用上面发布的相同方法制作的演示,jsfiddle.net/CDwKV/show,滚动条没有出现。在您的情况下,也许某些内容溢出了视口?
    • 这是我的情况:jeremy-dutheil.fr/barconniere 你可以看到即使内容不是太大,我也会溢出 =/
    • @JérémyDutheil 从您的html 标签中删除height:100% 声明,它应该可以工作。此外,您有多个包含您的内容的容器,这不是正确的引导设置,因此您可以在主 <section> 之后消除第二个 <div class="container-fluid"> ... </div> 容器@
    • 还有另一种情况我想弄清楚:jeremy-dutheil.fr/barconniere/pages/enterprise 在这个页面中,我希望滚动条在文本容器上,而不是在正文中;有可能吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-07
    • 1970-01-01
    • 2018-12-12
    • 1970-01-01
    • 1970-01-01
    • 2018-09-13
    相关资源
    最近更新 更多