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

标签 javascript html css responsive-design

相关信息:

页面包含两个元素:

  • 左边的 <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> 下，元素不再适合屏幕现在实际上需要滚动条因此保留，即使它们是它们自己的原因存在(就这个假设而言)。

附加信息:

  • 我没有使用任何 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/

上一篇：javascript - 使用自定义创建的 Mapbox 样式(来自 Mapbox Studio)和 Leaflet

下一篇：html - 表格单元格两种颜色背景对 Angular 线

相关文章：

html - 边框折叠的表格 - 右边框溢出底部

jquery - 不同高度的菜单需要放置在其父 div 的垂直居中

html - 如何在数据列表下拉列表中提供滚动效果？

javascript - 事件处理程序，损坏的页面

html - 为什么我的 CSS 没有被渲染？

javascript - ng-repeat 运行两次(Angular)

javascript - 仅从 iso 日期时间格式获取分钟

javascript - 查询字符串参数在发布后被删除并返回到 asp.net mvc 中的同一页面

javascript - 如何查找不在数据属性内的所有元素

javascript - 在 Javascript 中，如何避免 createTextElement 方法中的 "escaping"？

©2024 IT工具网  联系我们