gpt4 book ai didi

mobile - Twitter Bootstrap2 100% 高度响应

转载 作者:行者123 更新时间:2023-12-03 11:43:38 26 4
gpt4 key购买 nike

我想用 twitter 的 bootstrap v2 制作一个响应式布局,带有一个列和一个 map 。

这个想法是从 maps.google.com 构建一个类似的 UI,但使用带有 bootstrap2 的响应式设计。

我想有一种桌面风格

  • 顶部导航栏
  • 1 个左栏(作为侧边栏)
  • 高度:100% 减去 navbarHeight,带有滚动条
  • 宽度:.span3
  • 填充屏幕其余部分的内容

  • 然后对于响应式移动设计,我希望具有全高的部分具有取决于内容的高度。

    我做了一个草图来更好地解释
    sketch

    编辑:想做类似 this 的事情但响应迅速,并且仅适用于北(导航栏)、西(侧边栏)和中心(内容)

    EDIT2:我终于用 jquery 做到了,但我想要一个 CSS 解决方案。如果有人问,我会把解决方案作为答案。

    EDIT3:好的,这是我使用 JQuery 找到的解决方案(我认为使用纯 js 很容易做到)
    $(window).bind('resize', function() {
    if ( $(window).width() > 980 ) {
    $("#content").height(($(window).height()-40)+"px")
    $("#sidebar").height(($(window).height()-58)+"px")
    $("body").css("padding-top","40px")
    }
    else {
    $("#content").height(($(window).height()-50)+"px")
    $("#sidebar").height(($(window).height()-68)+"px")
    $("body").css("padding-top","0px")
    }

    $("#sidebar").css("overflow", "auto")
    $("body").css("padding-bottom","0px")
    $(".navbar").css("margin-bottom","0px")
    });
    $(selector).css()函数和条件 if可以替换为纯 CSS 和来自 CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive 的媒体查询

    但问题是 $(window).height()是计算运行时间。这应该被替换为 height:100% 之类的东西。在 CSS 中,这可以解决问题,但我找不到合适的位置来放置 100%高度。

    EDIT4:在这里,我发现它可能是一个纯 CSS 的解决方案!如果我取得进展,我会发布答案!
    http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

    最佳答案

    从我本周的调查来看(我正在尝试完成同样的事情),从纯 CSS 的角度来看,bootstrap 和 100% 高度的设计似乎是不兼容的(除非你想对 bootstrap 进行更改)。我有兴趣查看您的 jquery 解决方案。

    关于mobile - Twitter Bootstrap2 100% 高度响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10048967/

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