Question

问题是site。

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

我有两个带有以下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将移动到第一个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的大小，而是仅改变时间轴的高度。地图再次移动。

Answer 1

我想办法怎么做。结果如下：

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>

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

无法避免在另一个div上的div步骤

1 个答案: