为什么我的 div 的宽度没有 100% 扩展？
[英]Why is my div not expanding in width 100%?
问题描述
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.
我正在创建一个由 3 个 div 组成的侧边栏菜单，这 3 个 div 应该以菜单宽度的“宽度”扩展 100%，但它们不会。 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.我已检查以确保所有标签/div 都已关闭，并确保所有标签/div 都显示为网格并以 100% 的宽度放置在每个宽度上，但它们仍然没有扩展到其容器的 100% 宽度。 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>
3 个解决方案
解决方案1
1 已采纳 2022-06-09 05:32:25
Either make the menu class as div将菜单类设为 div
<div 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> </div>
or make a div below menu uwing the same.或在菜单下方创建一个 div 相同。
解决方案2
0 2022-06-09 05:34:00
If I understand you correctly you just have to add padding: 0 to .dash-desk-sidebar , because it has a "left padding" at the moment.如果我理解正确，您只需将padding: 0添加到.dash-desk-sidebar ，因为它目前有一个“左填充”。
.dash-desk-sidebar {
padding: 0;
}
解决方案3
0 2022-06-09 05:40:21
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: 40px to <menu> elements.例如，谷歌浏览器将padding-inline-start: 40px添加到<menu>元素。
Therefore, you can remove it by either declaring因此，您可以通过声明来删除它
.dash-desk-sidebar {
padding-inline-start: 0;
}
or或者
.dash-desk-sidebar {
padding: 0;
}
Alternatively, you can use a div instead of a menu .或者，您可以使用div而不是menu 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.