javascript - 元素在体内找不到足够的空间

javascript - 元素在体内找不到足够的空间 - JavaScript 样式

转载作者：太空狗更新时间：2023-10-29 14:00:36

问题:

由于未知原因，<main> 被下推到 <aside> 以下。我只能想出一个半理性的假设来解释这种行为。

但是，如果我将 body 的字体大小设置为 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>

最佳答案

问题编辑后更新

你的 main 被推到 aside 下的原因是你有一个不可见的空间，在你的情况下换行符但也可以是一个简单的空格，在标记中的元素之间，这实际上增加了大小以及使所有元素都超过 100% 宽度的元素，因此创建了滚动条。

当计算它们的宽度以适合其父元素宽度时(在本例中 body /视口(viewport))。

在这里您可以阅读更多关于它的信息以及如何摆脱它或使它的大小变为 0(如果要保持元素内联)。

并排排列元素的其他方法是使用 display: flex 或 display: table-cell，两者的行为与内联元素相似(意思是水平堆叠与 block 元素相反， block 元素垂直堆叠)，但当涉及到其设置大小与实际大小相比时，不会以相同的方式受到空白的影响。

澄清一下，即如果一个 flex 元素的宽度设置为 14.5%，它占用 14.5% 而不是更多，与内联相反，它将是 14.5% 加上空白(空白大小实际取决于设置的字体大小)

示例显示: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>

注意:

在使用 display: table 时，在 aside 和 main 之间创建边距的其他方法是使用单元格填充、边框宽度等.

使用您现有的代码，并且由于您不使用正常流程，绝对定位可能是一种选择。

<!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 - 元素在体内找不到足够的空间 - JavaScript 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33964543/

文章推荐： html - 表格单元格两种颜色背景对 Angular 线

文章推荐： git - 从 GIT 迁移到 TFS 并保留 checkin 时间戳

文章推荐： android - 获取以前的 Activity ？

android - 如何检查设备是否*快*足够
对于我的问题，我找不到更好的措辞。在我的应用程序中的某个时刻，我设置了一些非常密集的动画。问题是，在高端设备上，动画运行流畅且赏心悦目。另一方面，我测试过的一台低端设备在制作动画时表现非常糟糕。试
c - PAM - 找到控制标志(必需，足够)
我正在修补 OTP 模块 ( yubico_pam )，并尝试访问管理员选择的控制标志(例如必需，足够， ETC)。有什么想法吗？这是否可行(无需解析文件)？最佳答案无法在 API 中查询此信息
mingw - 在 MinGW 上开始使用 gnulib 并且不熟悉(足够)自动工具
我有一些为 Linux 编写的 C 代码，依赖于套接字和 arpa/inet.h 以及 libusb.h，我想在 MinGW 下为 Windows 编译它。 (请注意，当前项目只有一个非常简单的 Ma

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城