元素在body中找不到足够的空间 - JavaScript样式 [英] Elements do not find enough space inside body - JavaScript styling
问题描述
相关信息：
页面包含两个元素：
-
A
<
（注意：
所有的高度，宽度和边距都是根据以下方面设置的： var w = screen.width / 100; （and var h = screen.height / 100; ）页面在任何显示分辨率上基本上都是相同的。并且它们被设置为使得< aside> 和< main> 的宽度以及它们之间的边距所有加起来 screen.width 。
例如：
$ b b
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>在屏幕中和滚动条现在实际上需要，因此即使它们是他们自己存在的原因（就这个假设而言）。
其他信息：
-
元素有
display =inline-block;。使用float会在浏览器大小超过最大尺寸时产生可怕的行为。
我不使用任何CSS样式表：所有我的样式是由JavaScript完成的（简单的原因，我想要的大小依赖
screen.width 和 screen.height ）。 $ b b
以下是重现问题的代码：
<！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％的宽度，因此创建滚动条。
这个空间，对于内联元素（不是绝对的，固定的，或浮动的）存在，需要被考虑在一起元素大小，当计算它们的宽度以适合他们的父母宽度（在这种情况下身体/视口）。
在这里你可以阅读更多关于它和如何摆脱或者使其大小变为0（如果要保持元素内联）。
- https://www.w3.org/TR/2010/WD-css3-text- 20101005 /＃white-space-collapsing
- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
- 如何删除inline-block元素之间的空格？
并排排列元素的其他方法是使用 display：flex 或 display：table-cell ，两者都具有与内联元素类似的行为（在堆叠水平方向与块元素相反，
为了澄清，即如果宽度设置为14.5％，那么，在弹性项目上，它占14.5％，而不是内联，与14.5％加上白色空间（其中白色空间大小实际上取决于设置的字体大小）相反
示例 display：flex （推荐）
* { box-sizing：border-box;} html，body {margin：0; height：100％;} body {display：flex;高度：100％;}旁边{宽度：14％;边际权益：0.5％; background-color：＃f66;} main {width：85.5％; background-color：＃66f;}
< aside& aside< / aside>< main>
显示：table-cell （适用于旧版浏览器）
* {box-sizing：border-box;} html， body {margin：0; height：100％;} body {display：table; width：100％; height：100％;} aside {display：table-cell;宽度：14％; background-color：＃f66;} main {display：table-cell;宽度：85.5％; background-color：＃66f;}。margin {display：table-cell; width：0.5％;}
< aside& aside< / aside>< div class =margin>< / div>< main>
注意：
$ b
$ b 其他使用 aside 和主 c $ c> 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>
< hr>
更新2
您的代码的问题是在DOM完成之前运行，因此创建滚动条。尝试下面的示例，我添加了一个延迟，你会看到它的工作原理（当浏览器运行最大化）。
<！DOCTYPE html> ;< html>< script>函数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>
Relevant information:
The page contains two elements:
An <aside> to the left.
A <main> to the right.
(Note: Throughout this post, heights are mentioned for the sake of completeness, but are irrelevant to producing this problem.)
All heights, widths, and margins are set with respect to var w = screen.width/100; (and var h = screen.height/100;) so that the page essentially looks the same in any display resolution. And they are set so that the width of <aside> and <main>, and the margin between them all add up to screen.width.
For example:
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)
The problem:
The <main> gets pushed down below the <aside> for unknown reasons. I can only think of a half-sensible hypothesis to somewhat explain this behavior.
However, if I set the font size of the body to 0 and zoom out (so that the elements take less space) and zoom back in, this gets fixed (I don't know why, and don't ask me how I found this out).
What is the reason for this behavior, and what is the proper fix?
The hypothesis (can be skipped):
The browser seems to think "What would happen if I display the scrollbars even though they are not needed?", and then notices that the scrollbars have a width > 0, which means that <aside> and <main> are taking more space than available (since they are set to take up 100% of the screen width, and now there is a scrollbar competing for the space). The browser therefore decides to reposition the <main> below the <aside> and ruin the design.
And now since <main> is under <aside> the elements no longer fit inside the screen and the scrollbars are actually needed now and therefore stay, even though they are the cause of their own existence (as far as this hypothesis goes).
Additional information:
I am not using any CSS-stylesheet: all my styling is done by JavaScript (for the simple reason that I want the sizes to depend on screen.width and screen.height).
The elements have display = "inline-block";. Using float produces horrendous behavior when the browser is anything but max size.
Here is the code to reproduce the problem:
<!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>
解决方案 Update after the question edit
The reason why your main gets pushed down under aside is because you have an invisible space, in your case the line break but can be a simple blank space as well, between your elements in your markup, which actually adds size along with the elements making it all exceed 100% width, hence create the scroll bar.
That space, which exist for inline elements (which is not positioned with absolute or fixed, or floated), needs to be taken into account together with the elements size, when calculating their width to fit their parents width (in this case the body/viewport).
Here you can read more about it and how to get rid of it or make it become 0 in size (if to keep the elements inline).
- https://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
- How to remove the space between inline-block elements?
Other ways to line up elements side-by-side is to use display: flex or display: table-cell, both with a similar behavior as inline elements (in the meaning of stacking horizontal in opposite to block elements, which stacks vertical), though doesn't suffer from the white space in the same way when it comes to its set size compared to actual size.
To clarify, i.e. if a width is set to 14.5% on a flex item, it takes 14.5% and no more, in opposite to an inline, which will be 14.5% plus the white space (where the white space size actually depends on the set font size)
Sample display: flex (recommended)
* {
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>
Sample display: table-cell (for older browsers)
* {
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>
Note:
Other ways to create a margin between the aside and main when using display: table, is to use cell padding, border width etc.
With your existing code, and since you don't use normal flow, absolute positioning could be an option.
<!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>
Update 2
The problem with your code is it runs before the DOM is completely finished, hence create scroll bars. Try below sample, where I added a delay, and you'll see it works (when browser runs maximized).
<!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>
这篇关于元素在body中找不到足够的空间 - JavaScript样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
