元素在body - JavaScript样式中找不到足够的空间。
有关资料：
该页包含两个元素：
- 左边是
<aside>。 - 右边是
<main>。
(注意:在这篇文章中提到高度是为了完整，但与产生这个问题无关。)
所有的高度、宽度和边距都是针对var w = screen.width/100; (和var h = screen.height/100;)设置的，因此页面在任何显示分辨率中看起来都是一样的。它们的设置使得<aside>和<main>的宽度，以及它们之间的空白相加为screen.width。
例如：
var w = screen.width/100;
document.getElementsByTagName('main')[0].style.width = 85.5*w + "px";
document.getElementsByTagName('aside')[0].style.width = 14*w + "px";
document.getElementsByTagName('aside')[0].style.marginRight = 0.5*w + "px";(85.5 + 14 + 0.5 = 100)
问题是：
由于未知的原因，<main>被推到<aside>下面。我只能想出一个半理性的假设来解释这种行为。
但是，如果我将正文的字体大小设置为0，然后缩小(以便元素占用更少的空间)并将其缩小，就会修复它(我不知道为什么，也不问我是如何发现的)。
这种行为的原因是什么，正确的修复方法是什么？
假设(可以跳过)：
浏览器似乎在想：“如果我显示滚动条，即使它们是不需要的，会发生什么？”，然后注意到滚动条的宽度> 0，这意味着
<aside>和<main>占用的空间比可用空间多(因为它们将占用屏幕宽度的100%，而现在有一个滚动条在竞争这个空间)。因此，浏览器决定将<main>重新定位到<aside>下面，并破坏设计。现在，由于<main>在<aside>之下，不再适合在屏幕中的元素，而滚动条现在实际上是需要的--，因此保持不变，尽管它们是它们自身存在的原因(就这个假设而言)。
其他信息：
- 我没有使用任何CSS-样式表:我所有的样式都是由JavaScript完成的(原因很简单，我希望大小取决于
screen.width和screen.height)。 - 元素具有
display = "inline-block";。当浏览器不是最大大小时，使用float会产生可怕的行为。
这里是重现问题的代码：
<!DOCTYPE html>
<html>
<body>
<aside></aside>
<main></main>
<script>
var h = screen.height/100;
var w = screen.width/100;
var e = document.getElementsByTagName("aside")[0].style;
e.display = "inline-block";
e.backgroundColor = "lightblue";
e.width = 14*w + "px";
e.height = 69*h + "px";
e.marginRight = 0.5*w + "px";
e = document.getElementsByTagName("main")[0].style;
e.display = "inline-block";
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
</script>
</body>
</html>回答 5
Stack Overflow用户
发布于 2016-04-27 12:30:04
滚动条假说是正确的。以下是解决方案：如何获得没有(减)滚动条的屏幕宽度？。我对它进行了测试，使用document.body.clientWidth解决了这个问题。另一个问题是内联块元素需要在没有空格或换行符的情况下链接在一起(以避免不必要的边距)。
<body><aside></aside><main></main></body>Stack Overflow用户
发布于 2016-05-03 12:15:27
您的问题是aside和main之间的空白，占用了一些空间，因为您正在使用inline-block进行显示。
来自“Shah”的回答是对的，你必须去掉这个空白。
如建议的那样，可以通过删除它来做到这一点：
<aside></aside><main></main> 但是要保留html缩进，还可以使用html注释<!-- -->。
<aside>
//stuff
</aside><!--
--><main>
//other stuff
</main>Stack Overflow用户
发布于 2015-12-11 01:01:23
一个近乎完整的解释：
以下工作(但也有其他方法)：
- 将正文的字体大小更改为0，以便内联块元素之间的空格变为0(或使用任何其他技术)。其他答案对此作了详尽的解释。
- 给身体一个固定的宽度。在这种情况下，
screen.width。这个工作的原因有点复杂。注意，如果没有指定，主体将占用浏览器的整个宽度(不一定是屏幕)。有两种情况：
- (**Warning:** _This part is closer to a hypothesis than a proper answer_.) When the browser is maximized (width of the screen and the browser are the same) the body will have the maximum width of `screen.width` (if needed), so the elements are _not_ taking up too much space. However, since the body does not immediately know how wide it needs to be, it seems to not "be prepared", so the elements end up taking too much space after all. This is why giving the body its width in advance fixes this issue (there are also other ways around this - see other answers).
- When the browser is _not_ maximized, the maximum width of the body is the width of the browser window, and not the screen. The combined width of the elements is now larger than the width of the body, hence this behavior. Giving the body the fixed width of `screen.width` fixes this, but there are other solutions too (for example setting the white-space to no-wrap).
以下是建议更改后的代码：
<!DOCTYPE html>
<html>
<body>
<aside></aside>
<main></main>
<script>
var h = screen.height/100;
var w = screen.width/100;
var e = document.getElementsByTagName("aside")[0].style;
e.display = "inline-block";
e.backgroundColor = "lightblue";
e.width = 14*w + "px";
e.height = 69*h + "px";
e.marginRight = 0.5*w + "px";
e = document.getElementsByTagName("main")[0].style;
e.display = "inline-block";
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
e.fontSize = "0"; //this line
e.width = 100*w + "px"; //and this line have been added
</script>
</body>
</html>https://stackoverflow.com/questions/33964543
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号