0

这是问题站点。

让我解释一下，以防万一我会解决它，所以每个人都可以知道它。

我有两个带有以下 html 代码的 div

<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
    <div class="row-fluid">
       <div class="col-md-8">
            <div class="timeline"></div>
                        &nbsp;
        </div>
        <div class="col-md-4">
             <div id="map" class="map"></div>
        </div>
     </div>
</div>

我正在谈论的两个 div 是"col-md-8"和"col-md-4"

如果您尝试调整窗口大小，则第二个 div 将移动到第一个的底部，但它会覆盖它后面的所有其他内容。我尝试玩css，但没有成功。有什么建议吗？

编辑： 问题的屏幕截图如何在全窗口上显示：screen1 调整大小后如何：screen2

编辑2：我认为这是一种解决方案，但对我来说太复杂了。也许有人可以帮忙。如果屏幕尺寸小于 col-md-8（所以第二个 div 会移到底部），我会将 div（数据视图）的高度更改为 580+（地图高度）。

我试过这个：

<script>
$(window).resize(resizemap);
    function resizemap() {
        var winWidth = $(window).width();
        if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
        {
            var Hmap = $("#map").height();
            $('#dataview').css("height", 580+Hmap);

        }
    }
</script>

问题是，它没有改变整个 div 的大小，而是只改变了时间轴的高度。地图再次移动。

4

1 回答 1

0

我想怎么做。结果如下：

HTML：

<div id= "dataview" style = "height:590px;border:solid;">
    <div  class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
      <div class="row-fluid">
          <div class="col-md-8">
              <div class="timeline"></div>
               &nbsp;
           </div>
           <div class="col-md-4">
               <div id="map" class="map"></div>
           </div>
        </div>
     </div>
</div>

这是javascript：

<script>
$(window).resize(resizemap);
window.onload = resizemap;
    function resizemap() {
        var winWidth = $(window).width();
        if (winWidth < 995)
        {
            var Hmap = $("#map").height();
            $('#dataview').css("height", 590+Hmap);

        }
    }
</script>

唯一的问题是，如果我使用浏览器的最大化按钮调整窗口大小，数据视图高度保持不变。

于 2013-10-29T19:16:42.013 回答