Question

我正在使用bootstrap做一个这样的简单版本：http://techlist.in/
基本上，我想要一个具有固定大小和固定位置的地图和右侧栏。

我开始使用类似的东西：

HTML：

...
<div class="container">
  <div class="span10">
    <div id="map_canvas">
    </div>
  </div>
  <div class="span2" style="position:fixed; right:0">
    Some stuff
  </div>
</div>
...

CSS：

#map_canvas {
  display:block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:40px; /* used for the top navigation bar */
}

但是这没有按预期工作，因为地图保持100％宽度，并且“某些东西”标签出现在地图的顶部。任何提示？

更新

事实上，我已经有了导航栏，但我没有在代码中详细说明，我的不好。所以基本上html页面的整个结构是（添加了缺少的行div）：

<body>

  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
      ...
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="span10">
        <div id="map_canvas">
        </div>
      </div>
      <div class="span2" style="position:fixed; right:0">
        Some stuff
      </div>
    </div>
  </div>

  <!-- include javascript stuff -->
  ...

</body>

css文件是：

#map_canvas {
  display:block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  height: 90%
  width: 80%;
  left:0;
  right:0;
  margin-top:40px;
  margin-right:200px;/* used for the top navigation bar */
  background: #ccc;
}

如果为地图留下200px的右边距，我怎样才能用边栏填充边距？

基本上，我需要一个宽度为200px的侧栏，地图会相应地调整屏幕大小。

更新3

我想知道我是否真的需要使用容器/行来实现这种布局（我仍然无法按预期工作）。因为我只需要一个地图和一个侧边栏（即使窗口调整大小也应该始终保留在地图的右侧），使用基本的div / css而不是引导类是否有意义？

这基本上就是我所需要的：http://jsfiddle.net/kuXYq/4/

Answer 1

看看这个小提琴，我觉得它可能会有所帮助。

http://jsfiddle.net/eKQGD/

我用百分比来保持相同

    #map_canvas {
  display:block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  height: 90%
  width: 80%;
  left:0;
  right:0;
  margin-top:40px;
  margin-right:150px;/* used for the top navigation bar */
  background: #ccc;
}

Answer 2

这个问题的答案有几个部分。

首先要指出的是，为什么需要“固定大小和位置”，这有点模糊，我的意思是说使用的术语可能会让你失去理智一点点。通常，如果您计划在具有滚动条的页面上，并且您希望元素无论如何都保持在页面上的相同位置，您只需要使用“固定”css位置属性。在这种情况下，您似乎根本不想要页面滚动，因为地图看起来与整个页面的大小相同。看起来你在侧边栏上真正想要的是它是一个固定的高度（也就是浏览器窗口的高度），溢出设置为滚动。
其次，您的元素周围似乎缺少<div class="row"></div>标记 - 需要一个带有“行”类的标记才能使引导“span”类起作用。
最后，如果我试图复制你发布的链接，使用一点JS爱情，我会选择这样的话：http://jsfiddle.net/kzBkA/5/（添加背景颜色只是为了表明它是什么看起来像）

HTML：

<div class="container">
  <div class="row">
      <div class="span10">
        <div id="nav_bar">
            Nav bar goes here
        </div>
        <div id="map_canvas">
            test
        </div>
      </div>
      <div class="span2">
          <div id="sidebar">
              Some stuff
          </div>
      </div>
  </div>
</div>

的CSS：

#nav_bar {
    height:40px;
    background-color:blue;
}
#map_canvas {
    background-color:green;
}

#sidebar{
    background-color:red;
    overflow-y:auto;
}

JS：

$(function(){
    $("#map_canvas").height($(window).height() - 40);
    $("#sidebar").height($(window).height());
});

更新：

所以 - 再次，首先，我鼓励您重新考虑使用固定元素。您似乎正在尝试构建一个不会滚动的页面，而是使用专门用于滚动的“定位”功能（位置：固定），它基本上会告诉您所有好的引导代码被忽略并将其放在您的位置告诉它。一个更好的方法是使用Bootstrap来获得优势。我将行类更改为row-fluid，我将导航栏移动到带有地图的span10（因为这实际上是你想要导航的宽度，或者至少是示例中的那个），我删除了“navbar-固定顶级“类，因为你实际上并不需要修复东西，并从侧边栏中删除了固定位置（因为这基本上使它忽略了你想要做的事情）。查看更新的jsfiddle：http://jsfiddle.net/kzBkA/7/ - 您可能需要修改JS以使map_canvas div设置为正确的高度，否则这应该在浏览器调整大小时使页面流畅，而不必添加大量不必要的CSS规则。一般来说，如果你使用一个脚手架框架，你应该利用它来避免创建带有大量“width:80%; height:20%; margin: ...”的混乱，凌乱的css - 使用框架和脚手架的全部意义是避免那种代码：）

HTML：

<div class="container">
    <div class="row-fluid">
      <div class="span10">
        <div class="navbar navbar-inverse">
            <div class="navbar-inner">
                navbar
            </div>
        </div>
        <div id="map_canvas">
            map goes here
        </div>
      </div>
      <div class="span2" id="sidebar">
        Some stuff
      </div>
    </div>
  </div>

CSS：

.container{
    max-width:100%;
}

#map_canvas {
    background-color:green;
}

#sidebar{
    background-color:red;
    overflow-y:auto;
}

JS：

$(function(){
    $("#map_canvas").height($(window).height() - 40);
    $("#sidebar").height($(window).height());
});

更新2

刚刚意识到我错过了关于侧边栏总是200px的部分，但地图宽度是流动的。我已经更新了小提琴以反映这一点以及更新，以便在调整窗口大小时重置大小 - http://jsfiddle.net/kzBkA/9/

HTML：

<div class="container">
    <div class="row-fluid">
      <div class="span10 left-col">
        <div class="navbar navbar-inverse">
            <div class="navbar-inner">
                navbar
            </div>
        </div>
        <div id="map_canvas">
            map goes here
        </div>
      </div>
      <div class="span2 right-col" id="sidebar">
        Some stuff
      </div>
    </div>
  </div>

CSS：

.container{
    max-width:100%;
}

#map_canvas {
    background-color:green;
}

#sidebar{
    background-color:red;
    overflow-y:auto;
}

.right-col{
    width:200px;
}

JS：

$(function(){
    resizeElements();
    window.onresize = function(event) {
        resizeElements();
    }
});

function resizeElements(){
    //set height
    $("#map_canvas").height($(document).height() - $(".navbar").outerHeight() - 20 /*not sure where this is coming from, possibly the scrollbar?*/);
    $("#sidebar").height($(document).height());

    //set width of left col
    $(".left-col").width($(document).width() - $(".right-col").outerWidth() - 20 /*not sure where this is coming from, possibly the scrollbar?*/)
}

地图和固定侧栏与引导程序

2 个答案: