隐藏侧边栏时更改 div 宽度...使用 javascript
[英]change div width when sidebar is hidden... with javascript
问题描述
hey I am writing a little website and I am using w3css that I find very simple and nice.
嘿，我正在写一个小网站，我正在使用 w3css，我觉得它非常简单和好。
I have the body with max-width:100%;我的body max-width:100%; ; ; a sidebar class="w3-hide-small" with width: 15%; sidebar class="w3-hide-small" width: 15%; and a main with margin-left:15%; width:85%;和一个main ， margin-left:15%; width:85%; margin-left:15%; width:85%;
But when the sidebar is hidden on small screen, the main is still 85% and it remains a 15% white on the right of the browser.但是当侧边栏隐藏在小屏上时，主要还是 85%，在浏览器的右侧仍然是 15% 的白色。
I think that I shall do it with javascript cause w3css and I thought this code, but for sure it is full of error.我认为我应该使用 javascript 来完成它，因为 w3css 我认为这段代码，但可以肯定它充满了错误。
var Sidebar = document.getElementById('theSidebar');
if (Sidebar.visibility === hidden){
document.getElementById('theMain').style.width = '100%'
document.getElementById('theMain').style.margin-left = '0px'}
But...... it just does not work:D但是......它只是不起作用：D
Suggestions?建议？
Hoping that I described the issue well.希望我能很好地描述这个问题。
Bye!!!再见！！！
Andrea安德烈亚
1 个解决方案
解决方案1
0 2022-02-04 21:12:21
The problem was that I had a blank space when I resized the screen to phone width.问题是当我将屏幕调整为手机宽度时，我有一个空白区域。 That's because I set the style of the main division <div class=w3-main style="margin-left: 15%; width:85%" > that is 100 - 15 = 85. I was thinking to use a javascript function.那是因为我设置了主分区的样式<div class=w3-main style="margin-left: 15%; width:85%" >即 100 - 15 = 85。我正在考虑使用 javascript function。
But, as suggested by David Thomas, I avoided javascript to make the thing in a easier way using css grid.但是，正如 David Thomas 所建议的那样，我避免使用 javascript 以使用 css 网格以更简单的方式进行操作。 I resolved the question writing:我解决了写作问题：
<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>
And even I think that it may be not the perfect solution by me, the thing works and now when I visualize in phone screen, hiding the sidebar, the right white margin disappears and remains the color red.甚至我认为它可能不是我的完美解决方案，它可以工作，现在当我在手机屏幕上可视化时，隐藏侧边栏，右边的白边消失并保持红色。
I thank everyone who answered me.我感谢所有回答我的人。
Andrea安德烈亚
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.