无法将随机 div 限制为当前屏幕尺寸答案

【问题标题】：Having trouble restricting a randomized div to the current screen size无法将随机 div 限制为当前屏幕尺寸
【发布时间】：2014-11-29 13:40:03
【问题描述】：

https://drive.google.com/file/d/0B_sa6Otnqx0LZl8zN182MjI2RWs/view?usp=sharing

https://drive.google.com/file/d/0B_sa6Otnqx0LZFFyWks1ZXZZSGc/view?usp=sharing

以上是我正在开发的网页游戏网站的 html 和 javascript 文件的链接。我正在尝试限制屏幕的大小，以便随机对象不会出现在屏幕之外，人们必须滚动才能到达它。我尝试将随机 div 包含在父 div 中，并将宽度和高度设置为 100%（我尝试过自动），但没有任何运气。最新的尝试是将身体宽度和高度设置为 100%，正如某处所建议的那样。我没有任何运气。我在想我需要通过javascript来限制div可以移动的距离，但是我不确定如何在不将其永久设置为一种尺寸的情况下获得屏幕宽度和高度的值。

编辑：除了我现在拥有的代码之外，我还尝试将以下代码添加到包含随机 div 的父 div 标签：

#container{
   width:100%(tried auto as well)
   height:100%(tried auto as well)
}

提前致谢

【问题讨论】：

欢迎@tgilman92！！！你可以分享你到目前为止所尝试的吗？

标签： javascript html css height width

【解决方案1】：

当您在一个元素上指定 width: 100% 或 height: 100% 时，您是在告诉该元素查看其父元素的大小。

CSS

.full-size { 
    height: 100%;
    width: 100%
}

HTML

<body>
    <div class="fill-size"></div>
</body>

上面的<div> 将填充父容器，在本例中为<body>。

如果您希望 <body> 的高度和宽度为 100%，您还需要告诉其父级 <html> 它的大小。所以在你的 CSS 中尝试：

body, html {
    width: 100%;
    height: 100%;
}

这将为您的<body> 提供屏幕的高度和宽度，以便<body> 的任何具有高度和宽度百分比的子级都可以绘制出视口。

为了帮助限制全屏容器 div 内的随机子元素，请设置它们的 position: absolute;，以便您可以通过 JS 随机化它们的位置并保持 div 相对于包含父元素的位置。

类似this fiddle。

通过将 top 和 left 属性设置为父 div 的约束，继续重新加载页面以使圆圈随机化其位置。

希望对你有所帮助！

【讨论】：

酷我真的很感激。我现在正在工作，但看着代码，它看起来正是我所需要的。我想我需要一些东西来调用窗口屏幕，但我不确定如何。
这似乎解决了我的问题，非常感谢。但是还有一个问题，也许我想错了。当窗口缩小（即未在屏幕上最大化）时，它似乎仍在屏幕外，这是另一个问题，或者我只是没有正确处理它。我还从#box 标签中删除了'overflow:hidden' css 行，但我已将html 和body 标签的高度和宽度缩小到90%，以避免在屏幕的侧面和底部出现滚动条跨度>
如果您在页面加载之后手动缩小屏幕，那么您必须将容器的大小调整为新的屏幕大小。我已经更新了小提琴以考虑屏幕变化。
谢谢，我实际上已经拥有了我需要的所有代码。因为每次创建一个新的正方形/圆形时，它都会随机化我必须将 max_x 和 max_y 变量移动到 makeBox 函数中的位置。一看到你的代码，我就意识到我做错了什么。感谢您的帮助，非常感谢。
太棒了！很高兴我能帮上忙！