0

我正在使用 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% 宽度，并且“一些东西”标签出现在地图顶部。有什么提示吗？

更新

其实我已经有了nav-bar，只是代码中没有详细说明，我的不好。所以基本上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/

4

2 回答 2

0

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

  • 首先要指出的是，为什么需要“固定大小和位置”的要求有点模糊，我的意思是所使用的术语可能会让你有点偏离想法。通常，如果您计划在具有滚动条的页面上并且希望元素无论如何都保持在页面上的相同位置，则只需要使用“固定” css 位置属性。在这种情况下，您似乎根本不想滚动页面，因为地图看起来与整个页面的大小相同。看起来你真正想要的侧边栏是一个固定的高度（也就是浏览器窗口的高度），溢出设置为滚动。

  • 其次，您似乎缺少<div class="row"></div>元素周围的标签 - 带有“行”类的标签是使引导程序“跨度”类工作所必需的。

  • 最后，如果我试图复制您发布的链接，我会使用一些 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 来发挥你的优势。我将行类更改为行流体，我将您的导航栏移动到带有地图的 span10 中（因为这是您实际想要导航的宽度，或者至少在示例中是这样的），我删除了“导航栏-固定顶部”类，因为您实际上并不需要修复东西，并从侧边栏中删除了固定位置（因为这基本上使它忽略了您正在尝试做的事情）。http://jsfiddle.net/kzBkA/7/ - 您可能需要修改 JS 以使 map_canvas div 设置为正确的高度，否则这应该注意在浏览器调整大小时使您的页面流畅而无需添加大量不必要的 CSS 规则。一般来说，如果你使用脚手架框架，你应该利用它来避免创建带有大量“”的杂乱无章的 css width:80%; height:20%; margin: ...- 使用框架和脚手架的全部目的是避免那种代码:)

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

刚刚意识到我错过了关于侧边栏始终为 200 像素但地图宽度流动的部分。我已经更新了小提琴以反映这一点以及更新，以便在调整窗口大小时重置大小 - 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?*/)
}
于 2013-06-17T19:50:06.047 回答
0

看看我做的这个小提琴可能会有所帮助。

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;
}
于 2013-06-17T19:22:10.987 回答