[英]How to make my Flex box sidebar go full screen when i resize the window?
我有這個 Flex 框，當我在移動模式下調整頁面大小時，我想看到側邊欄全屏顯示和頁腳消失。
只有當我將窗口大小調整為移動模式時，有沒有辦法讓我的側邊欄占據整個頁面？
我找不到任何與我的問題相關的東西，我花了好幾個小時才找到解決方案，但我找不到任何東西......
提前謝謝你們！
This is the CSS and below is the HTML:
@import url('https://fonts.googleapis.com/css? family=Nunito:300,300,700'); body { font-family: 'Nunito', sans-serif; background: #EFF1F7; padding: 0; margin: 0; } .content { grid-area: content; } .sidebar{ grid-area: sidebar; background: linear-gradient(to left, rgba(249,107,142,1), rgba(218,103,230,1), rgba(130,125,253,1)); justify-content: center; } .footer { grid-area: footer; background: white; } .container { font-size: 1em; width: 100%; height: 100vh; display: grid; grid-template-areas: "sidebar" "content" "footer"; grid-template-columns: 1fr; grid-template-rows: 130px 800px 250px; } .content, .sidebar, .footer { padding: 1em; } nav ul { margin: 0; padding: 0; display: flex; justify-content: space-between; text-align: center; } nav li { list-style: none; padding: 1em 0; } nav li a { color: white; font-weight: 700; opacity: 0.6; text-decoration: none; transition: 0.3s; } nav li a:hover { opacity: 1; } .action-btn { display: inline-block; text-decoration: none; color: white; font-weight: 700; background: #867bfb; padding: 0.5em 2em; border-radius: 40px; margin: 1em 0; transition: 0.3s; } .action-btn:hover { box-shadow: 0 10px 50px rgba(188,197,216,1); } footer ul { max-width: 640px; margin: 2em auto; padding: 0; text-align: center; display: flex; flex-direction: row; } footer ul li { list-style: none; align-self: flex-end; } footer ul li a { text-decoration: none; color: #c1c6ce; } svg { width: 40%; } footer p{ font-size: 0.8em; } @media (min-width: 1040px) { .container { grid-template-areas: "sidebar content" "sidebar footer"; grid-template-columns: 300px 1fr; grid-template-rows: 1fr auto; } nav ul { display: flex; justify-content: space-between; flex-direction: column; } .sidebar { background: linear-gradient( rgba(249,107,142,1), rgba(218,103,230,1), rgba(130,125,254,1)); padding-top: 3em; } footer ul { max-width: 960px; margin: 0 auto; padding: 2em 0; } svg { width: 20%; } }
<!DOCTYPE html> <html> <head> <title>New</title> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="normalize.css" type="text/css"> </head> <body> <div class="container"> <div class="sidebar"> <nav> <ul> <li><img src="GalGadot.jpg" style="width: 120px; height: 80px; border-radius: 50%;"></li> <li><a href="#">Menu</a></li> <li><a href="#">Groups</a></li> <li><a href="#">Saved</a></li> <li><a href="#">Events</a></li> </ul> </nav> </div> <div class="footer"> <footer> <ul> <!--instagram SVG icon--> <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style></defs><path class= "a" d="M17.25 7.288v1.269c0 .297-.241.539-.538.539h-1.269c-.299 0-.538-.242-.538-.539v-1.269c0-.297.239-.538.538-.538h1.269c.297 0 .538.241.538.538zm-5.25 7.403c1.486 0 2.693-1.205 2.693-2.692s-1.207-2.69-2.693-2.69c-1.487 0-2.691 1.204-2.691 2.691s1.204 2.691 2.691 2.691zm4.261-3.291c.028.196.046.396.046.599 0 2.38-1.928 4.308-4.307 4.308s-4.307-1.928-4.307-4.307c0-.204.018-.403.046-.599.027-.194.066-.383.118-.567h-1.107v5.879c0 .297.241.538.538.538h9.424c.297 0 .538-.241.538-.538v-5.879h-1.107c.05.184.09.373.118.566zm7.739.6c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-5.385c0-.892-.723-1.615-1.615-1.615h-10.77c-.892 0-1.615.723-1.615 1.615v10.769c0 .893.723 1.616 1.615 1.616h10.77c.892 0 1.615-.723 1.615-1.616v-10.769z"/></svg><p>3K</p></a></li> <!--facebook SVG icon--> <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style> </defs><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg><p>10K</p></a></li> <!--twitter SVG icon--> <li><a href="#"><svg viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="39.337" height="33.328"></rect></clipPath></defs><g class="b"><path class="a" d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578 9.3 9.3 0 0 1-2.958 1.13 4.66 4.66 0 0 0-7.938 4.25 13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568 4.692 4.692 0 0 1-2.104.08 4.661 4.661 0 0 0 4.352 3.234 9.348 9.348 0 0 1-5.786 1.995 9.5 9.5 0 0 1-1.112-.065 13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41z"></path></g></svg><p>5.7K</p></a></li> <!--Linkedin SVG icon--> <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 32.481"><defs><style>.a{fill:#98a0ad;}</style> </defs><path class="a" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg><p>13.5K</p></a></li> </ul> </footer> </div> </div> </body> </html>
您可以簡單地編寫一個@media查詢來制作.sidebar { width: 100%}和.footer { display: none }
調整窗口大小時，如何防止所有彈性項目調整大小？
[英]How can I prevent all of my flex-items from resizing when I resize my window?
您如何編碼一個按鈕，單擊該按鈕可使iframe全屏顯示？
[英]How do you code a button that can make an iframe go full screen when clicked?
如何使縱向視頻保持在自己的區域，並且將視頻傾斜到水平時應轉到全屏
[英]how to make video on portrait remain on its own area and when it will be tilted to horizontal it should go to full screen
如何使用 Javascript 使窗口全屏顯示（在整個屏幕上拉伸）
[英]How to make the window full screen with Javascript (stretching all over the screen)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.