CSS Grid：折叠后的侧面菜单栏不会自动更改第二列宽度

【问题标题】：CSS Grid: side menu bar after collapse dose not change second column width automaticallyCSS Grid：折叠后的侧面菜单栏不会自动更改第二列宽度
【发布时间】：2022-01-19 17:46:33
【问题描述】：

我正在学习 CSS 网格，我有一个简单的 .container 网格，有 3 行（页眉、导航栏、页脚）。

.navbar 网格区域有 .sidebar 和 .main 网格区域。

我想点击一个隐藏的复选框并更改侧边栏网格区域的宽度，并希望主网格区域自动占用剩余宽度

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 10% auto ;
  grid-template-columns: 1fr;
  
  grid-template-areas:
    "header"   
    "navbar"    
    "footer";
}


.header {
  grid-area: header;
  border: none;   
  grid-gap: 0.1rem;
  background-color: var(--dark-blue);
  display: grid;
  grid-template-columns: 10% 30% 60%;
  color: var(--white);
  align-content: center;
}

.navbar
{
  grid-area: navbar;
  
  display: grid;
  grid-template-rows: repeat(1);
  grid-template-columns: var(--side-menu-width) auto;
  grid-template-areas:"sidebar main"
 
}

.sidebar {
  display: grid;  
  grid-area: sidebar;
  grid-template-rows: 15% 65% 20%;
  background: var(--dark-blue);
  border:none;
} 


.checkbox:checked ~ .sidebar {
  left: 8rem;
  width: 5rem;
}


:root {
  --font-size: 16px;
  --unit: 1rem;
  --font-family: Segoe UI, Tahoma, Verdana, sans-serif;
  --font-weight: normal;
  --font-color: #212529;
  --white: #fff;
  --primary-color: #0076d6;
  --primary-hover: #005ea2;
  --secondary-color: #71767a;
  --secondary-hover: #565c65;
  --danger-color: #b50909;
  --danger-hover: #8b0a03;
  --success-color: #146947;
  --success-hover: #105439;
  --warning-color: #ffbe2e;
  --dark-gray: #3d4551;
  --medium-gray: #a9aeb1;
  --light-gray: #dfe1e2;
  --pale-gray-base: #edeff0;
  --pale-gray-4: #f1f3f6;
  --pale-gray-3: #f5f6f7;
  --pale-blue: #e8f5ff;
  --light-blue: #cfe8ff;
  --dark-blue: #0b4778;
  --light-indigo: #dee5ff;
  --pale-indigo: #edf0ff;
  --pale-red: #fff3f2;
  --gold: #ffbe2e;
  --light-gold: #ffe396;
  --pale-gold: #fef0c8;
  --light-green: #c7efe2;
  --pale-green: #e0f7f6;
  --fast-transition: 0.3s;
  --normal-transition: 0.5s;
  --slow-transition: 0.7s;
  --strong-box-shadow: 4px 4px 4px #0000001a;
  --default-box-shadow: 4px 4px 4px #0000000f;
  --subtle-box-shadow: 2px 2px 4px #00000008;
  --reduce-drag-menu: 0px;
  --reduce-main-menu: 0px;
  --reduce-submenu: 0px;
  --side-submenu-width: 270px;
  --side-menu-width: 16rem;
  --side-drag-width: 20px;
  --top-nav-height: 20px;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
body {
  margin-left: 1rem;
  margin-right:1rem;
  margin-top: 0;;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  
}
.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 10% auto ;
  grid-template-columns: 1fr;
  
  grid-template-areas:
    "header"   
    "navbar"    
    "footer";
}
.container div {
 
   border: var(--strong-box-shadow) solid;  
}


/* Header  */

.header {
  grid-area: header;
  border: none;   
  grid-gap: 0.1rem;
  background-color: var(--dark-blue);
  display: grid;
  grid-template-columns: 10% 30% 60%;
  color: var(--white);
  align-content: center;
}

.navbar
{
  grid-area: navbar;
  
  display: grid;
  grid-template-rows: repeat(1);
  grid-template-columns: var(--side-menu-width) auto;
  grid-template-areas:"sidebar main"
 
}

.sidebar {
  display: grid;  
  grid-area: sidebar;
  grid-template-rows: 15% 65% 20%;
  background: var(--dark-blue);
  border:none;
} 

.social-icons-list{
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 35rem;
}


.social-link-listitem{
  
  font-size: 1.2rem; 
  text-decoration: none;
  border-radius: 1rem;
  
}

.social-link-listitem:hover{
  background: var(--light-indigo);  
  color: var(--dark-blue);
  
} 

.social-link{
  color: var(--white);  
  transition: color .4s ease;  

}

.social-link:hover
{
 color: var(--dark-blue);
} 

.social-link i{
  min-width: 3rem;
  border-radius: 1rem;
  line-height: 5rem;
  text-align: center;
  border-radius: 12px;
  
}


.social-link-listitem .tooltip
{
position: absolute;
transform: translateY(-50%);
text-align: center;
border-radius: .5rem;
height: 3rem;
align-items: center;
background: var(--white);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
left: 12rem;
transition: 0s;
width: var(--side-menu-width);
opacity: 0;
pointer-events: none;
}

.social-link-listitem:hover .tooltip
{
  transition: all .5s ease;
  opacity: 1;
}

/* Profile setting*/
.profile_content
{
  grid-row: 3;
  color : var(--white);  
  height: 4rem;
  padding-left: 2rem;

}
.profile_content .profile .profile_details{
  display: grid;
  
  grid-template-columns: 30% 70%;
  grid-template-rows: 1;
  
}

.profile_content .profile .profile_img{
  
  
  object-fit: cover;
  border-radius: 1rem;
  color: var(--white);
}


.main {
 
  grid-area: main;
  background:#105439;
  
}

.footer {
  grid-area: footer;
  background:#0076d6;
}


.header-icon { 
  text-align: center; 
}

.header-text{
    font-size: 1rem;
    text-align: left;
    margin: auto;
    
}

.header-confidential{
    font-size: 1rem;
    text-align: center;
    margin: auto;
}

.user-image {
  margin: auto;
  display: block;  
  text-align: center;
  border-radius: 10px;
  
}

/* end of Header  */



.menu-icon{
  cursor: pointer;
  margin-top: 3rem;
  padding-left: 2rem;
}

.menu-icon:hover .line{
  width: 2.5rem;
}

.line{
  height: .2rem;
  width: 2.5rem;
  background-color: #fff;
  margin-bottom: .6rem;
}

.line-1 , .line-3
{
  width: 1.8rem;
  transition: all .3s;
}



.checkbox:checked ~ .sidebar {
  left: 8rem;
  width: 5rem;
}


.checkbox:checked ~ .main {
  width: 5rem;
}

.checkbox:checked ~ .sidebar .line-1 {
  transform: rotate(-405deg) translate(-5px, 6px);
  width: 2.5rem;
}

.checkbox:checked ~ .sidebar .line-2 {
  opacity: 0;
}

.checkbox:checked ~ .sidebar .line-3 {
  transform: rotate(405deg) translate(-5px, -6px);
  width: 2.5rem;
}

/* end navbar  */
<!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>SIR Data Preparation</title>
    
        <link rel="shortcut icon" type="image/png" href="./images/iaea_small.png" >
        
        
        <link rel="stylesheet" href="css/sir-style1.css">
        <link rel="stylesheet" href="css/all.min.css">
    </head>
<body>
    

    <div class="container">
      
            
            <div class="header"> <div class="header-icon">
                <img src="./images/iaea_small.png" alt>
            </div>
            <div class="header-text">SIR Data Preparation</div>
            <div class="header-confidential">HIGHLY CONFIDENTIAL</div> 
            
        
        </div>
            
             <!-- navbar  -->
        <div class="navbar">

            <input type="checkbox" class="checkbox" id="click" hidden>

            <!-- sidebar -->
            <div class="sidebar">
               
                <label for="click">
                    <div class="menu-icon">
                        <div class="line line-1"></div>
                        <div class="line line-2"></div>
                        <div class="line line-3"></div>
                    </div>
                </label>

                <ul class="social-icons-list">
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-house-user"></i>Dashboard</a>
                        <span class="tooltip">Dashboard</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-file-excel"></i>Worksheets</a>
                        <span class="tooltip">Worksheets</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-signal"></i>Live Dashboard</a>
                        <span class="tooltip">Live Dashboard</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-clock"></i>Scheduler</a>
                        <span class="tooltip">Scheduler</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"> <i class="fas fa-users-cog"></i>Settings</a>
                        <span class="tooltip">Settings</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fab fa-hire-a-helper"></i>Help</a>
                        <span class="tooltip">Help</span>
                    </li>

                   
                </ul>
                <div class="profile_content">
                    <div class="profile">
                        <div class="profile_details">
    
                        <img class="profile_img" src="./images/iaea_small.png"/>
                        <div class="name_job">
                            <div class="name">Yashveer Singh</div>
                            <div class="job">Developer</div>
                        </div>
                    </div>
                    </div>
                </div>

            </div>
            
          
            <div class="main">Main</div>
            <!-- end of sidebar -->
            

        </div>                
          
           
       

        <div class="footer">Footer</div>

    </div>

</body>
</html>
  grid-template-columns: 1fr;
  
  grid-template-areas:
    "header"   
    "navbar"    
    "footer";
}


.header {
  grid-area: header;
  border: none;   
  grid-gap: 0.1rem;
  background-color: var(--dark-blue);
  display: grid;
  grid-template-columns: 10% 30% 60%;
  color: var(--white);
  align-content: center;
}

.navbar
{
  grid-area: navbar;
  
  display: grid;
  grid-template-rows: repeat(1);
  grid-template-columns: var(--side-menu-width) auto;
  grid-template-areas:"sidebar main"
 
}

.sidebar {
  display: grid;  
  grid-area: sidebar;
  grid-template-rows: 15% 65% 20%;
  background: var(--dark-blue);
  border:none;
} 


.checkbox:checked ~ .sidebar {
  left: 8rem;
  width: 5rem;
}

【问题讨论】：

  • 请在stack snippet 或其他代码编辑器（例如jsFiddle）中发布您的代码。如果我们能重现问题就更好了。
  • @MichaelBenjamin ：我已经添加了 sn-p 并再次检查，我可以在 sn-p 窗口中重现该问题您看不到“运行代码片段按钮”吗？
  • @MichaelBenjamin 如果您想让我做其他事情，请告诉我？我添加了sn-p 请确认你是否可以看到它？

标签： css css-grid


【解决方案1】：

我编辑了你的 sn-p，有一些小问题，所以你的代码无法工作：

  • 您在创建列时指定了固定宽度，然后您尝试调整它们的大小，具有固定高度宽度的列需要覆盖 grid-template-rows 和/或 grid-template-columns 才能工作。
  • 由于我们需要更新 grid-template-columns 的值，因此按钮必须是导航栏 div 的同级而不是子级。

但你在接近可行的地方，这里是重新设计的版本：

:root {
  --font-size: 16px;
  --unit: 1rem;
  --font-family: Segoe UI, Tahoma, Verdana, sans-serif;
  --font-weight: normal;
  --font-color: #212529;
  --white: #fff;
  --primary-color: #0076d6;
  --primary-hover: #005ea2;
  --secondary-color: #71767a;
  --secondary-hover: #565c65;
  --danger-color: #b50909;
  --danger-hover: #8b0a03;
  --success-color: #146947;
  --success-hover: #105439;
  --warning-color: #ffbe2e;
  --dark-gray: #3d4551;
  --medium-gray: #a9aeb1;
  --light-gray: #dfe1e2;
  --pale-gray-base: #edeff0;
  --pale-gray-4: #f1f3f6;
  --pale-gray-3: #f5f6f7;
  --pale-blue: #e8f5ff;
  --light-blue: #cfe8ff;
  --dark-blue: #0b4778;
  --light-indigo: #dee5ff;
  --pale-indigo: #edf0ff;
  --pale-red: #fff3f2;
  --gold: #ffbe2e;
  --light-gold: #ffe396;
  --pale-gold: #fef0c8;
  --light-green: #c7efe2;
  --pale-green: #e0f7f6;
  --fast-transition: 0.3s;
  --normal-transition: 0.5s;
  --slow-transition: 0.7s;
  --strong-box-shadow: 4px 4px 4px #0000001a;
  --default-box-shadow: 4px 4px 4px #0000000f;
  --subtle-box-shadow: 2px 2px 4px #00000008;
  --reduce-drag-menu: 0px;
  --reduce-main-menu: 0px;
  --reduce-submenu: 0px;
  --side-submenu-width: 270px;
  --side-menu-width: 16rem;
  --side-menu-width-reduced: 5rem;
  --side-drag-width: 20px;
  --top-nav-height: 20px;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
body {
  margin-left: 1rem;
  margin-right:1rem;
  margin-top: 0;;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  
}
.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 10% auto ;
  grid-template-columns: 1fr;
  
  grid-template-areas:
    "header"   
    "navbar"    
    "footer";
}
.container div {
 
   border: var(--strong-box-shadow) solid;  
}


/* Header  */

.header {
  grid-area: header;
  border: none;   
  grid-gap: 0.1rem;
  background-color: var(--dark-blue);
  display: grid;
  grid-template-columns: 10% 30% 60%;
  color: var(--white);
  align-content: center;
}

.navbar
{
  grid-area: navbar;
  
  display: grid;
  grid-template-rows: repeat(1);
  grid-template-columns: var(--side-menu-width) 1fr;
  grid-template-areas:"sidebar main"
 
}

.sidebar {
  display: grid;  
  grid-area: sidebar;
  grid-template-rows: 15% 65% 20%;
  background: var(--dark-blue);
  border:none;
} 

.social-icons-list{
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 35rem;
}


.social-link-listitem{
  
  font-size: 1.2rem; 
  text-decoration: none;
  border-radius: 1rem;
  
}

.social-link-listitem:hover{
  background: var(--light-indigo);  
  color: var(--dark-blue);
  
} 

.social-link{
  color: var(--white);  
  transition: color .4s ease;  

}

.social-link:hover
{
 color: var(--dark-blue);
} 

.social-link i{
  min-width: 3rem;
  border-radius: 1rem;
  line-height: 5rem;
  text-align: center;
  border-radius: 12px;
  
}


.social-link-listitem .tooltip
{
position: absolute;
transform: translateY(-50%);
text-align: center;
border-radius: .5rem;
height: 3rem;
align-items: center;
background: var(--white);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
left: 12rem;
transition: 0s;
width: var(--side-menu-width);
opacity: 0;
pointer-events: none;
}

.social-link-listitem:hover .tooltip
{
  transition: all .5s ease;
  opacity: 1;
}

/* Profile setting*/
.profile_content
{
  grid-row: 3;
  color : var(--white);  
  height: 4rem;
  padding-left: 2rem;

}
.profile_content .profile .profile_details{
  display: grid;
  
  grid-template-columns: 30% 70%;
  grid-template-rows: 1;
  
}

.profile_content .profile .profile_img{
  
  
  object-fit: cover;
  border-radius: 1rem;
  color: var(--white);
}


.main {
 
  grid-area: main;
  background:#105439;
  
}

.footer {
  grid-area: footer;
  background:#0076d6;
}


.header-icon { 
  text-align: center; 
}

.header-text{
    font-size: 1rem;
    text-align: left;
    margin: auto;
    
}

.header-confidential{
    font-size: 1rem;
    text-align: center;
    margin: auto;
}

.user-image {
  margin: auto;
  display: block;  
  text-align: center;
  border-radius: 10px;
  
}

/* end of Header  */



.menu-icon{
  cursor: pointer;
  margin-top: 3rem;
  padding-left: 2rem;
}

.menu-icon:hover .line{
  width: 2.5rem;
}

.line{
  height: .2rem;
  width: 2.5rem;
  background-color: #fff;
  margin-bottom: .6rem;
}

.line-1 , .line-3
{
  width: 1.8rem;
  transition: all .3s;
}


.checkbox:checked ~ .navbar {
  grid-template-columns: var(--side-menu-width-reduced) 1fr;
}

.checkbox:checked ~ .sidebar .line-1 {
  transform: rotate(-405deg) translate(-5px, 6px);
  width: 2.5rem;
}

.checkbox:checked ~ .sidebar .line-2 {
  opacity: 0;
}

.checkbox:checked ~ .sidebar .line-3 {
  transform: rotate(405deg) translate(-5px, -6px);
  width: 2.5rem;
}

/* end navbar  */
<!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>SIR Data Preparation</title>
    
        <link rel="shortcut icon" type="image/png" href="./images/iaea_small.png" >
        
        
        <link rel="stylesheet" href="css/sir-style1.css">
        <link rel="stylesheet" href="css/all.min.css">
    </head>
<body>
    

    <div class="container">
      
            
            <div class="header"> <div class="header-icon">
                <img src="./images/iaea_small.png" alt>
            </div>
            <div class="header-text">SIR Data Preparation</div>
            <div class="header-confidential">HIGHLY CONFIDENTIAL</div> 
            
        
        </div>
            
             <!-- navbar  -->
       <input type="checkbox" class="checkbox" id="click" hidden>
        <div class="navbar">

            

            <!-- sidebar -->
            <div class="sidebar">
               
                <label for="click">
                    <div class="menu-icon">
                        <div class="line line-1"></div>
                        <div class="line line-2"></div>
                        <div class="line line-3"></div>
                    </div>
                </label>

                <ul class="social-icons-list">
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-house-user"></i>Dashboard</a>
                        <span class="tooltip">Dashboard</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-file-excel"></i>Worksheets</a>
                        <span class="tooltip">Worksheets</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-signal"></i>Live Dashboard</a>
                        <span class="tooltip">Live Dashboard</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fas fa-clock"></i>Scheduler</a>
                        <span class="tooltip">Scheduler</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"> <i class="fas fa-users-cog"></i>Settings</a>
                        <span class="tooltip">Settings</span>
                    </li>
                    <li class="social-link-listitem">
                        <a href="#" class="social-link"><i class="fab fa-hire-a-helper"></i>Help</a>
                        <span class="tooltip">Help</span>
                    </li>

                   
                </ul>
                <div class="profile_content">
                    <div class="profile">
                        <div class="profile_details">
    
                        <img class="profile_img" src="./images/iaea_small.png"/>
                        <div class="name_job">
                            <div class="name">Yashveer Singh</div>
                            <div class="job">Developer</div>
                        </div>
                    </div>
                    </div>
                </div>

            </div>
            
          
            <div class="main">Main</div>
            <!-- end of sidebar -->
            

        </div>                
          
           
       

        <div class="footer">Footer</div>

    </div>

</body>
</html>

检查差异以更好地了解修改：https://www.diffchecker.com/qamU3z5W（在线可用 1 个月）

【讨论】：

  • 非常感谢您的帮助和解释。
  • 欢迎您:)
猜你喜欢
  • 1970-01-01
  • 2014-02-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-18
  • 2015-08-14
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode