為什么寬度：0不起作用
[英]Why width: 0 doesn't work
問題描述
在@media screen and (max-width: 700px) ，我aside {width: 0} ，但是它並沒有消失。 調整大小后，窗口將保持為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
因為它具有display: table-cell的屬性，它將迫使它的行為像表一樣。
您可以只在當前代碼中添加display: block 。
或者，將代碼替換為一個display: none可以解決問題。
或者，使用相當怪異的樣式，請參見下文。
* { 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
這是因為您正在使用display: table進行布局。
表格有自己的計算寬度的方法，因此設置寬度並不意味着就可以了。
嘗試使用display: none
解決方案3
1 已采納 2017-07-06 09:49:34
如果您不想使用display: none ，則可以添加以下內容：
@media screen and (max-width: 700px) {
aside {
opacity: 0;
width: 0;
border: none;
font-size: 0;
}
}
jQuery - 如果元素被隱藏，$(this).width() 不起作用！
[英]jQuery - $(this).width() doesn't work if the element is hidden!
為什么絕對寬度的子級百分比子級在IE中沒有定位？
[英]Why doesn't the percentage width child in absolutely positioned parent work in IE?
為什么window.scroll（）和window.width（）不能一起使用？
[英]Why doesn't window.scroll() and window.width() work together?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.