为什么宽度：0不起作用
[英]Why width: 0 doesn't work
问题描述
In @media screen and (max-width: 700px) , I set aside {width: 0} , but it doesn't disappear. 
在@media screen and (max-width: 700px) ，我aside {width: 0} ，但是它并没有消失。 After resizing, the window remains as null space with width: 52px , why is this happening, and how can I fix it? 调整大小后，窗口将保持为width: 52px空空间，为什么会发生这种情况，我该如何解决？
* { margin:0; padding:0; } html, body { height: 100%; } body { background-color: #eee; } .wrapper { height: 100%; display: table; width: 100%; text-align: center; border-collapse: collapse; } header { box-sizing: border-box; display: table-row; height: 50px; background-color: #eee; border-bottom: 1px solid black; } main { height: 100%; display: table; width: 800px; margin: 0 auto; background-color: #fff; } section { display: table-cell; } aside { display: table-cell; box-sizing: border-box; border-left: 1px solid black; width: 300px; /*__transition*/ opacity: 1; transition: all .25s; } footer { box-sizing: border-box; border-top: 1px solid black; display: table-row; height: 50px; background-color: #eee; } @media screen and (max-width: 800px) { main { width: 100%; } } @media screen and (max-width: 700px) { section { width: 100%; } aside { opacity: 0; width: 0; } }
<html> <body> <div class="wrapper"> <header>HEADER</header> <main> <section>SECTION</section> <aside>ASIDE</aside> </main> <footer>FOOTER</footer> </div> </body> </html>
3 个解决方案
解决方案1
2 2017-07-06 09:50:12
Because it has a property of display: table-cell which will force it to behave like a table. 因为它具有display: table-cell的属性，它将迫使它的行为像表一样。
You can just add display: block in your current code. 您可以只在当前代码中添加display: block 。
Alternatively, replace the code with a single display: none will do the trick. 或者，将代码替换为一个display: none可以解决问题。
Or, with a rather weird styling, see below. 或者，使用相当怪异的样式，请参见下文。
* { margin:0; padding:0; } html, body { height: 100%; } body { background-color: #eee; } .wrapper { height: 100%; display: table; width: 100%; text-align: center; border-collapse: collapse; } header { box-sizing: border-box; display: table-row; height: 50px; background-color: #eee; border-bottom: 1px solid black; } main { height: 100%; display: table; width: 800px; margin: 0 auto; background-color: #fff; } section { display: table-cell; } aside { display: table-cell; box-sizing: border-box; border-left: 1px solid black; width: 300px; /*__transition*/ opacity: 1; transition: all .25s; } footer { box-sizing: border-box; border-top: 1px solid black; display: table-row; height: 50px; background-color: #eee; } @media screen and (max-width: 800px) { main { width: 100%; } } @media screen and (max-width: 700px) { section { width: 100%; } aside { display: none; /* OR */ display: table-cell; border: none; opacity: 0; width: 0; font-size: 0; /* OR */ display: block; opacity: 0; width: 0; } }
<html> <body> <div class="wrapper"> <header>HEADER</header> <main> <section>SECTION</section> <aside>ASIDE</aside> </main> <footer>FOOTER</footer> </div> </body> </html>
解决方案2
1 2017-07-06 09:46:13
It's because you're using display: table to make the layout. 这是因为您正在使用display: table进行布局。
Tables have their own way to calculating their width, so setting a width doesn't mean that it will be exactly that. 表格有自己的计算宽度的方法，因此设置宽度并不意味着就可以了。
Try using display: none instead 尝试使用display: none
解决方案3
1 已采纳 2017-07-06 09:49:34
If you don't want to use display: none you can add this: 如果您不想使用display: none ，则可以添加以下内容：
@media screen and (max-width: 700px) {
aside {
opacity: 0;
width: 0;
border: none;
font-size: 0;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.