Javascript使用calc調整div寬度

Question

我正在處理的 javascript 代碼遇到錯誤。 我正在嘗試制作一個可折疊的側邊欄。 每當用戶將鼠標懸停在欄上時，邊欄應為 280px 寬，主要內容應為calc(100vw-280px) 。 或者，當用戶沒有將鼠標懸停在欄上時，側邊欄應為 80px 寬，主要內容應為calc(100vw-80px) 。

這看起來很簡單，但#content div 不會在函數運行時調整大小。 我唯一能想到的是，javascript 對calc並不友好，但在 CSS 或默認值中，我也可能忽略了其他一些東西。 為了安全起見，我包含了所有代碼。 任何幫助表示贊賞！

 var mini = true; function toggleSidebar() { if (mini) { document.getElementById("rightbar").style.width = "280px"; document.getElementById("content").style.width = "calc(100vw-280px)"; this.mini = false; } else { document.getElementById("rightbar").style.width = "80px"; document.getElementById("content").style.width = "calc(100vw-80px)"; this.mini = true; } }

 body {margin: 0; background-color: #F2F2F2;} .topbar { z-index: 10; position: fixed; top: 0; left: 0; width: 100vw; height: 56px; font-size: x-large; background-color: #5B7042; border-bottom: 4px solid #3F5328} #rightbar { z-index: 1; position: fixed; top: 60px; right: 0%; width: 80px; height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; transition: 0.5s; color: #412A1B; border-left: 2px solid darkgray} #content { display: grid; position: fixed; top: 60px; left: 0; width: calc(100vw - 80px); height: calc(100vh - 60px); padding: 32px; box-sizing: border-box; grid-auto-columns: 1fr; grid-template-columns: 1fr 300px; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 20px 40px; grid-template-areas: "hello hello" "announce tasks" "announce tasks" "announce streak";} .hello { grid-area: hello; margin-top: 20px; margin-bottom: 30px; text-align: center; font-size: 3em; color: #3F5328} .announce { overflow: scroll; grid-area: announce} .tasks { padding: 20px; grid-area: tasks; text-align: center;} .something {grid-area: something} .streak { grid-area: streak; font-size: 52px; font-weight: 800} .module { background-color: white; border-radius: 6px; box-shadow: 3px 4px #CECECE} table {width: 100%} td { padding: 10px 20px; border-bottom: 1px solid lightgray;} td .msg { font-size: 20px; line-height: 1.5} .posted { display: grid; grid-template-columns: 42px 2fr 1fr; grid-template-areas: "pic author timestamp"} .posted .img {grid-area: pic} .posted .author { grid-area: author; display: flex; align-items: center; font-weight: 800; font-size: 16px;} .posted .timestamp { grid-area: timestamp; display: flex; justify-content: flex-end; align-items: center; color: gray; font-size: 16px} .pic{ width: 25px; clip-path: circle();}

 <link rel='stylesheet' href='https://classcolonies.com/resources/style.css'> <div class='topbar'></div> <div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div> <div id='content'> <div class='hello'>Hi, John.</div> <div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div> <div class='module streak center'>🔥 32</div> <div class='module announce'> <table> <tr> <td> <span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span> <div class='posted'> <span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span> <span class='author'>Mr. Dansby</span> <span class='timestamp'>33m ago</span> </div> </td> </tr> <tr> <td> <span class='msg'>Have a great fall break!</span> <div class='posted'> <img class='pic' src='https://mrdansby.com/resources/pics/1.png'> <span class='author'>Mr. Dansby</span> <span class='timestamp'>1d ago</span> </div> </td> </tr> <tr> <td> <span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span> <div class='posted'> <img class='pic' src='https://mrdansby.com/resources/pics/1.png'> <span class='author'>Mr. Dansby</span> <span class='timestamp'>3d ago</span> </div> </td> </tr> </table> </div> </div>

Answer 1

calc對空格有點挑剔。 . 具體來說，計算方程中的運算符必須在兩邊都有一個空格。 我從這樣的東西更新了你的calc JS 設置行......

document.getElementById("content").style.width = "calc(100vw-280px)";

...包括空格：

document.getElementById("content").style.width = "calc(100vw - 280px)";

...它似乎更接近我認為你正在尋找的東西； 請參閱下面的片段：

 var mini = true; function toggleSidebar() { if (mini) { document.getElementById("rightbar").style.width = "280px"; document.getElementById("content").style.width = "calc(100vw - 280px)"; this.mini = false; } else { document.getElementById("rightbar").style.width = "80px"; document.getElementById("content").style.width = "calc(100vw - 80px)"; this.mini = true; } }

 body {margin: 0; background-color: #F2F2F2;} .topbar { z-index: 10; position: fixed; top: 0; left: 0; width: 100vw; height: 56px; font-size: x-large; background-color: #5B7042; border-bottom: 4px solid #3F5328} #rightbar { z-index: 1; position: fixed; top: 60px; right: 0%; width: 80px; height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; transition: 0.5s; color: #412A1B; border-left: 2px solid darkgray} #content { display: grid; position: fixed; top: 60px; left: 0; width: calc(100vw - 80px); height: calc(100vh - 60px); padding: 32px; box-sizing: border-box; grid-auto-columns: 1fr; grid-template-columns: 1fr 300px; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 20px 40px; grid-template-areas: "hello hello" "announce tasks" "announce tasks" "announce streak";} .hello { grid-area: hello; margin-top: 20px; margin-bottom: 30px; text-align: center; font-size: 3em; color: #3F5328} .announce { overflow: scroll; grid-area: announce} .tasks { padding: 20px; grid-area: tasks; text-align: center;} .something {grid-area: something} .streak { grid-area: streak; font-size: 52px; font-weight: 800} .module { background-color: white; border-radius: 6px; box-shadow: 3px 4px #CECECE} table {width: 100%} td { padding: 10px 20px; border-bottom: 1px solid lightgray;} td .msg { font-size: 20px; line-height: 1.5} .posted { display: grid; grid-template-columns: 42px 2fr 1fr; grid-template-areas: "pic author timestamp"} .posted .img {grid-area: pic} .posted .author { grid-area: author; display: flex; align-items: center; font-weight: 800; font-size: 16px;} .posted .timestamp { grid-area: timestamp; display: flex; justify-content: flex-end; align-items: center; color: gray; font-size: 16px} .pic{ width: 25px; clip-path: circle();}

 <link rel='stylesheet' href='https://classcolonies.com/resources/style.css'> <div class='topbar'></div> <div id='rightbar' onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"></div> <div id='content'> <div class='hello'>Hi, John.</div> <div class='module tasks center'><p>You have <b>10 tasks</b> to do this week.</p></div> <div class='module streak center'>🔥 32</div> <div class='module announce'> <table> <tr> <td> <span class='msg'>Please do not message me at the moment. I am trying to fix this horrible CSS glitch..</span> <div class='posted'> <span class='img'><img class='pic' src='https://mrdansby.com/resources/pics/1.png'></span> <span class='author'>Mr. Dansby</span> <span class='timestamp'>33m ago</span> </div> </td> </tr> <tr> <td> <span class='msg'>Have a great fall break!</span> <div class='posted'> <img class='pic' src='https://mrdansby.com/resources/pics/1.png'> <span class='author'>Mr. Dansby</span> <span class='timestamp'>1d ago</span> </div> </td> </tr> <tr> <td> <span class='msg'>Be sure to bring a pencil and paper to class tomorrow!</span> <div class='posted'> <img class='pic' src='https://mrdansby.com/resources/pics/1.png'> <span class='author'>Mr. Dansby</span> <span class='timestamp'>3d ago</span> </div> </td> </tr> </table> </div> </div>