calc() 在 css 中无法设置宽度？

Question

我正在制作一个带有 sidd 导航变量的文本编辑器。当鼠标悬停在导航栏上时，它的宽度会增加，而编辑器的宽度会减少。但是即使我创建的宽度变量发生变化，编辑器的宽度也不会改变。

这是我的程序：

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" class="nav-btn">
        <img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
        <div id="create-text" class="nav-text">Create</div>
      </div>
      <div id="files" class="nav-btn">
        <img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
        <div id="files-text" class="nav-text">My Files</div>
      </div>
      <div id="feed" class="nav-btn">
        <img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
        <div id="feed-text" class="nav-text">Feed</div>
      </div>
      <div id="challenges" class="nav-btn">
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
        <div id="challenges-text" class="nav-text">Challenges</div>
      </div>
      <div id="leaderboard" class="nav-btn">
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
        <div id="leaderboard-text" class="nav-text">Leaderboard</div>
      </div>
      <div id="notification" class="nav-btn">
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
        <div id="notification-text" class="nav-text">Notifications</div>
      </div>
      <div id="chat" class="nav-btn">
        <img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
        <div id="chat-text" class="nav-text">Dev Chat</div>
      </div>
      <div id="settings" class="nav-btn">
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
        <div id="settings-text" class="nav-text">Settings</div>
      </div>
      <div id="signout" class="nav-btn">
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
        <div id="signout-text" class="nav-text">Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>

如您所见，导航栏和编辑器有 10 像素的差距 b/w，我还更新了它悬停时的值。但是当导航栏悬停时，编辑器的宽度不会改变。

类似问题： link

我也尝试了类似问题中提到的方法，但仍然不起作用...

The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.

Answer 1

在悬停时，您正在定义一个仅在导航栏元素内具有作用域的变量。

要为导航栏悬停加编辑器上的编辑器元素 select 定义变量，这将为紧接在导航栏之后的编辑器元素 select。

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');
:root {
  --nav-btn-width: 40px;
  --nav-width: calc(100% - 60px);
}

* {
  z-index: 1;
}

body {
  padding: 0;
  margin: 0;
  background-color: #c73737;
}

#navbar {
  position: absolute;
  height: 100%;
  width: 50px;
  max-width: 200px;
  background-color: #0068ad;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease-in-out;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 2;
}

#navbar:hover {
  width: 200px;
  border-radius: 0 10px 10px 0;
  --nav-btn-width: 190px;
}
#navbar:hover + #editor {
  --nav-width: calc(100% - 210px);
}

.nav-btn {
  width: var(--nav-btn-width);
  height: 40px;
  background-color: rgb(0, 184, 70);
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  transition: 0.35s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 7.5px;
  overflow: hidden;
  user-select: none;
  z-index: 10;
}

.nav-btn:hover {
  background-color: rgb(0, 255, 98);
}

#signout {
  position: absolute;
  bottom: 10px;
}

.nav-text {
  position: relative;
  top: 10px;
  font-size: 12pt;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

#editor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--nav-width);
  background-color: rgb(78, 78, 78);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div id="body-container" style="width: 100vh;height:100vh">
    <div id="navbar">
      <div id="create" class="nav-btn">
        <img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
        <div id="create-text" class="nav-text">Create</div>
      </div>
      <div id="files" class="nav-btn">
        <img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
        <div id="files-text" class="nav-text">My Files</div>
      </div>
      <div id="feed" class="nav-btn">
        <img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
        <div id="feed-text" class="nav-text">Feed</div>
      </div>
      <div id="challenges" class="nav-btn">
        <img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
        <div id="challenges-text" class="nav-text">Challenges</div>
      </div>
      <div id="leaderboard" class="nav-btn">
        <img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
        <div id="leaderboard-text" class="nav-text">Leaderboard</div>
      </div>
      <div id="notification" class="nav-btn">
        <img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
        <div id="notification-text" class="nav-text">Notifications</div>
      </div>
      <div id="chat" class="nav-btn">
        <img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
        <div id="chat-text" class="nav-text">Dev Chat</div>
      </div>
      <div id="settings" class="nav-btn">
        <img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
        <div id="settings-text" class="nav-text">Settings</div>
      </div>
      <div id="signout" class="nav-btn">
        <img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
        <div id="signout-text" class="nav-text">Sign out</div>
      </div>
    </div>
    <div id="editor"></div>
  </div>


  <!-- include script.js and styler.js -->
  <script src="script.js"></script>
  <script src="styler.js"></script>
  <script>
  </script>
</body>

</html>

calc() 在 css 中无法设置宽度？

calc() not working in css for setting width?

html

css

var

calc

width