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

Question

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

我的body max-width:100%; ; sidebar class="w3-hide-small" width: 15%; 和一个main ， margin-left:15%; width:85%; 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

建议？

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

再见！！！

安德烈亚

Answer 1

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

但是，正如 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>

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

我感谢所有回答我的人。

安德烈亚

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

问题描述

1 个解决方案

解决方案1
0 2022-02-04 21:12:21

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

问题描述

1 个解决方案

解决方案1 0 2022-02-04 21:12:21

解决方案1
0 2022-02-04 21:12:21