在窗户上安装div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (35)

我想在窗口内放置2个div(一个在顶部,另一个在下面),但是当我使用jQuery对我的脚本进行计算时,窗口溢出。我需要以下方式:

布局图

我有以下js和html:

$(document).ready(function() {
  on_resize();
  $(window).resize(on_resize);
});

function on_resize() {
  $(".container").height($(window).height());
  $(".top").height($(window).height() - $(".bottom").outerHeight());
}

<body>
  <div class="container">
    <div class="top">
      A big top container
    </div>
    <div class="bottom">
      The bottom container
    </div>
  </div>
</body>

当窗口调整大小时,计算正确完成,并且没有溢出。文档加载时有没有办法正确计算?

我已经尝试过使用$(window).on(“load”)而不是$(document).ready(),但它仍然会进行错误的计算。

提问于
用户回答回答于

只需添加html, body { margin: 0; }以防止body大多数浏览器中的默认边距:

$(document).ready(function() {
  on_resize();
  $(window).resize(on_resize);
});

function on_resize() {
  $(".container").height($(window).height());
  $(".top").height($(window).height() - $(".bottom").outerHeight());
}

html,
body {
  margin: 0;
  height: 100%;
}

.container {
  background: blue;
  color: white;
}

.bottom {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="top">
      A big top container
    </div>
    <div class="bottom">
      The bottom container
    </div>
  </div>
</body>

扫码关注云+社区

领取腾讯云代金券