0

嘿，我正在写一个小网站，我正在使用 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

建议？

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

再见！！！

安德烈亚

4

1 回答 1

0

问题是当我将屏幕调整为手机宽度时，我有一个空白区域。那是因为我设置了主分区的样式，<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>

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

我感谢所有回答我的人。

安德烈亚

于 2022-02-04T21:12:21.113 回答