隐藏侧边栏时更改div宽度......使用javascript答案

【问题标题】：change div width when sidebar is hidden... with javascript隐藏侧边栏时更改div宽度......使用javascript
【发布时间】：2022-02-04 14:24:09
【问题描述】：

嘿，我正在写一个小网站，我正在使用 w3css，我觉得它非常简单和好。

我有body 和max-width:100%;； sidebar class="w3-hide-small" 和 width: 15%; 和 main 和 margin-left:15%; width:85%;

但是当侧边栏隐藏在小屏上时，主要还是85%，在浏览器的右侧仍然是15%的白色。

我认为我应该使用 javascript 导致 w3css 并且我认为这段代码，但可以肯定它充满了错误。

var Sidebar = document.getElementById('theSidebar');
if (Sidebar.visibility === hidden){ 
document.getElementById('theMain').style.width = '100%'
document.getElementById('theMain').style.margin-left = '0px'}

但是......它只是不起作用：D

建议？

希望我能很好地描述这个问题。

再见！！！

安德烈亚

【问题讨论】：

这听起来应该比较简单，可以分享一下你的相关“minimal reproducible example”代码吗？请参阅：“I've been asked to create a 'runnable' snippet....” 不过，显而易见的建议是使用 CSS Grid 或 Flex 布局而不是 JavaScript。
好吧，我也许可以使用 w3 类“w3-rest”，所以当侧边栏消失时，其余部分将是 100%……也许？我现在就试试，非常感谢！ :D
不要告诉我们这件事。修正你的问题。它缺乏足够的信息来回答。再看How to Ask。
@Andrea，请在您的问题中添加所需的信息，以便其他人能够提供明智的答案，可能比您自己的更好。此外，如果您已经解决了问题，请发布答案：向我们以及该问题的任何未来访问者展示您是如何找到解决方案的。
将第一行改为 Sidebar.style.visibility === "hidden" 第四行改为 style.marginLeft = '0px'

标签： javascript w3-css

【解决方案1】：

问题是当我将屏幕大小调整为手机宽度时，我有一个空白区域。那是因为我设置了主分区<div class=w3-main style="margin-left: 15%; width:85%" >的样式，即100 - 15 = 85。我在考虑使用javascript函数。

但是，正如 David Thomas 所建议的，我避免使用 javascript 以使用 css 网格以更简单的方式制作。我解决了写作问题：

<html>

<head>
  <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
</head>

<body class="w3-content" style="max-width:100% !important;">

  <div class="w3-sidebar w3-hide-small w3-green" style="width:15%; z-index:3;">
  </div>

  <div class="w3-main w3-rest w3-red" style="margin-left:15%;">
    SOMETHING TO WRITE HERE...........
  </div>

</body>

即使我认为这对我来说可能不是完美的解决方案，但它可以工作，现在当我在手机屏幕上可视化时，隐藏侧边栏，右边的白边消失并保持红色。

感谢所有回答我的人。

安德烈亚

【讨论】：

要正确显示 sn-p，请转到整页然后调整浏览器大小，再见！