为什么我的DIV不宽度100％？
我正在创建由3个Divs组成的侧边栏菜单，这3个Divs应以“宽度” 100％扩展菜单宽度，但没有扩展。我已经检查了一下，以确保所有标签/div都关闭，并确保所有标签/div都显示为网格，并在每个宽度上放置100％，但仍然不会扩展到其容器的100％宽度。为什么这是以及如何修复它？
这是我的代码：
*,
html {
margin: 0;
border: 0;
box-sizing: border-box;
color: #fff;
font-family: pc_seniorregular;
font-weight: 400;
}
.mobile,
.tablet,
.laptop {
display: none;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16202a;
/* border: 5px solid blue; */
}
div,
menu,
header,
footer {
border: dotted 2px yellow;
display: grid;
height: 100%;
width: 100%;
}
.desktop {
height: 100%;
width: 100%;
/* border: 5px solid greenyellow; */
}
.dash-desk-wrap {
grid-template-columns: 1fr 4fr;
height: 100%;
width: 100%;
/* border: 5px solid red; */
}
/* SIDEBAR */
/* SIDEBAR */
/* SIDEBAR */
.dash-desk-sidebar {
display: grid;
grid-template-rows: 0.7fr 7fr 1fr;
height: 100%;
width: 100%;
border: 5px dotted blue;
}
.dash-desk-side-logo {
border: 3px dotted beige;
}
.dash-desk-side-list {
border: 3px dotted red;
}
.dash-desk-side-social {
border: 3px dotted green;
}
/* MAIN */
/* MAIN */
/* MAIN */
.dash-desk-main-wrap {
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}<!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">
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title>Base Template</title>
</head>
<body>
<div class="mobile">
<h1>mobile</h1>
</div>
<div class="tablet">
<h1>tablet</h1>
</div>
<div class="laptop">
<h1>laptop</h1>
</div>
<div class="desktop">
<div class="dash-desk-wrap">
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<menu class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</menu>
<!-- MAIN -->
<!-- MAIN -->
<!-- MAIN -->
<div class="dash-desk-main-wrap">
<header></header>
<div></div>
<div></div>
<footer></footer>
</div>
</div>
</div>
</body>
</html>I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in "width" 100% of the menu width but they don't. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don't expand to 100% width of their container. Why is that and how to fix it?
Here is my code:
*,
html {
margin: 0;
border: 0;
box-sizing: border-box;
color: #fff;
font-family: pc_seniorregular;
font-weight: 400;
}
.mobile,
.tablet,
.laptop {
display: none;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16202a;
/* border: 5px solid blue; */
}
div,
menu,
header,
footer {
border: dotted 2px yellow;
display: grid;
height: 100%;
width: 100%;
}
.desktop {
height: 100%;
width: 100%;
/* border: 5px solid greenyellow; */
}
.dash-desk-wrap {
grid-template-columns: 1fr 4fr;
height: 100%;
width: 100%;
/* border: 5px solid red; */
}
/* SIDEBAR */
/* SIDEBAR */
/* SIDEBAR */
.dash-desk-sidebar {
display: grid;
grid-template-rows: 0.7fr 7fr 1fr;
height: 100%;
width: 100%;
border: 5px dotted blue;
}
.dash-desk-side-logo {
border: 3px dotted beige;
}
.dash-desk-side-list {
border: 3px dotted red;
}
.dash-desk-side-social {
border: 3px dotted green;
}
/* MAIN */
/* MAIN */
/* MAIN */
.dash-desk-main-wrap {
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}<!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">
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title>Base Template</title>
</head>
<body>
<div class="mobile">
<h1>mobile</h1>
</div>
<div class="tablet">
<h1>tablet</h1>
</div>
<div class="laptop">
<h1>laptop</h1>
</div>
<div class="desktop">
<div class="dash-desk-wrap">
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<menu class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</menu>
<!-- MAIN -->
<!-- MAIN -->
<!-- MAIN -->
<div class="dash-desk-main-wrap">
<header></header>
<div></div>
<div></div>
<footer></footer>
</div>
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
要么将菜单类作为div
或在菜单下方做一个分区。
Either make the menu class as div
or make a div below menu uwing the same.
查看您在Code Inspector中的布局，看起来浏览器为菜单添加了默认填充。
例如，Google Chrome添加了一个
填充启动：40px<代码>＆lt;菜单＆gt; 元素。因此，您可以通过声明
或
替代地将其删除，您可以使用
div而不是菜单。Looking at your layout in code inspector it looks like browsers add default padding to menus.
For example, Google Chrome adds a
padding-inline-start: 40pxto<menu>elements.Therefore, you can remove it by either declaring
or
Alternatively, you can use a
divinstead of amenu.如果我正确理解您，您只需要添加
填充：0到.dash-desk-sidebar，因为它目前具有“左填充”。If I understand you correctly you just have to add
padding: 0to.dash-desk-sidebar, because it has a "left padding" at the moment.