相关信息:
该页面包含两个元素:
<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> 下方。我只能想到一个半明智的假设来解释这种行为。但是，如果我将 body 的字体大小设置为 0 并缩小(以便元素占用更少的空间)并重新放大，这将得到解决(我不知道为什么，不要问我是如何找到的这出)。
这种行为的原因是什么，正确的解决方法是什么？
假设(可跳过):
浏览器似乎在想“如果我显示滚动条，即使不需要它们会怎样？”，然后注意到滚动条的宽度 > 0，这意味着
<aside> 和 <main> 占用的空间多于可用空间(因为它们设置为占据屏幕宽度的 100%，现在有一个滚动条争夺空间)。因此浏览器决定将 <main> 重新定位在 <aside> 下方并破坏设计。现在由于 <main> 在 <aside> 下，元素不再适合屏幕 并且现在实际上需要滚动条 因此保留，即使它们是它们自身存在的原因(就这个假设而言)。附加信息:
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>
最佳答案
问题编辑后更新
您的 main 在 aside 下被推下的原因是因为您有一个不可见的空间，在您的情况下，换行符但也可以是一个简单的空白空间，位于标记中的元素之间，这实际上增加了元素的大小它都超过了 100% 的宽度，因此创建了滚动条。
在计算它们的宽度以适合其父宽度(在这种情况下为 body/视口(viewport))。
在这里您可以阅读有关它的更多信息以及如何摆脱它或使其大小变为 0(如果要保持元素内联)。
并排排列元素的其他方法是使用
display: flex 或 display: table-cell ，两者都具有与内联元素类似的行为(意思是水平堆叠与块元素相反，垂直堆叠)，但不会受到与实际大小相比，白色空间的设置大小相同。澄清一下，即如果一个 flex 元素的宽度设置为 14.5%，它需要 14.5% 并且不会更多，与内联相反，它将是 14.5% 加上空白(其中空白大小实际上取决于设置字体大小)
display: flex 示例(推荐)* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
height: 100%;
}
aside {
width: 14%;
margin-right: 0.5%;
background-color: #f66;
}
main {
width: 85.5%;
background-color: #66f;
}<aside>
aside
</aside>
<main>
main
</main>display: table-cell 示例(适用于旧浏览器)* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
body {
display: table;
width: 100%;
height: 100%;
}
aside {
display: table-cell;
width: 14%;
background-color: #f66;
}
main {
display: table-cell;
width: 85.5%;
background-color: #66f;
}
.margin {
display: table-cell;
width: 0.5%;
}<aside>
aside
</aside>
<div class="margin"></div>
<main>
main
</main>笔记:
使用
aside 时在 main 和 display: table 之间创建边距的其他方法是使用单元格填充、边框宽度等。使用您现有的代码，并且由于您不使用正常流，绝对定位可能是一种选择。
<!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.position = "absolute"; /* changed */
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.position = "absolute"; /* changed */
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e.left = 14.5*w + "px"; /* added */
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
</script>
</body>
</html>更新2
您的代码的问题是它在 DOM 完全完成之前运行，因此创建滚动条。尝试下面的示例，我在其中添加了延迟，您会看到它有效(当浏览器运行最大化时)。
<!DOCTYPE html>
<html>
<script>
function runOnLoad() {
setTimeout(function() {
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";
}, 200)
}
</script>
<body onload="runOnLoad();">
<aside></aside>
<main></main>
</body>
</html>关于javascript - 元素在 body 内找不到足够的空间 - JavaScript 样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33964543/