超過全高時如何使側導航貼在左上角？
[英]How to make side-nav stick to top-left when full-height is exceeded?
問題描述
我希望我的side-nav在其height超過（ 550px ）時可以滾動。我讓它總是垂直居中。但是當屏幕height小於550px ，我可以滾動但不能完全滾動。因為它應該從top有一點margin 。
在這里你可以看到
top兩個圖標不可見且無法訪問。
在550px height ，我嘗試在vh方面給出頂部邊距，但沒有奏效。
@media only screen and (max-height: 550px) {
.menu {
margin-top:30vh;
}
}
我需要動態計算這個頂部，但如何計算？我希望我可以使用calc()函數，但我知道它僅用於width和height響應計算。
*,*::after,*::before{ margin:0; padding:0; box-sizing: border-box; } html,body{ font-size:62,5%; background-color: #000 ; } body{ box-sizing: border-box; } .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .responsive { max-width: 100%; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .imgContainer{ overflow: hidden; border: 4px solid yellow; } .menu{ margin: 0; position: absolute; top:50%; -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 5px; background-color:#fff; padding:10px; height: auto; width: fit-content; } .myIcon{ margin-bottom:20px; font-size:40px; color:#000; display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="css/icon-font.css"> <link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css"> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> </head> <body> <div class="menu" > <a href=""><i class="ion-crop myIcon"></i></a> <a href=""><i class="ion-android-color-palette myIcon"></i></a> <a href=""><i class="ion-android-contract myIcon"></i></a> <a href=""><i class="ion-android-options myIcon"></i></a> <a href=""><i class="ion-android-sync myIcon"></i></a> <a href=""><i class="ion-contrast myIcon"></i></a> <a href=""><i class="ion-ios-analytics myIcon"></i></a> <a href=""><i class="ion-ios-color-wand myIcon"></i></a> </div> <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive"> </body> </html>2 個解決方案
解決方案1
1 已采納 2020-02-21 13:47:53
將您的菜單 css 更改為絕對不定位。 這樣，當您滾動時，當菜單高度超過屏幕高度時，您將滾動側邊欄菜單。
.menu{
margin: 0;
border-radius: 5px;
background-color:#fff;
padding:10px;
height: auto;
width: fit-content;
}
解決方案2
1 2020-02-21 14:03:11
使用您的初始代碼並添加max-height: 100vh; overflow: auto max-height: 100vh; overflow: auto to .menu {}可以解決問題，回答您的問題。 更干凈的代碼更好，我更喜歡 Mahatmasamatman 的回答......
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-size: 62, 5%; background-color: #000; } body { box-sizing: border-box; } .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .responsive { max-width: 100%; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .imgContainer { overflow: hidden; border: 4px solid yellow; } .menu { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 5px; background-color: #fff; padding: 10px; height: auto; width: fit-content; max-height: 100vh; /* ADDED */ overflow: auto; /* ADDED */ } .myIcon { margin-bottom: 20px; font-size: 40px; color: #000; display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="css/icon-font.css"> <link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css"> <link rel="shortcut icon" type="image/png" href="img/favicon.png"> </head> <body> <div class="menu"> <a href=""><i class="ion-crop myIcon"></i></a> <a href=""><i class="ion-android-color-palette myIcon"></i></a> <a href=""><i class="ion-android-contract myIcon"></i></a> <a href=""><i class="ion-android-options myIcon"></i></a> <a href=""><i class="ion-android-sync myIcon"></i></a> <a href=""><i class="ion-contrast myIcon"></i></a> <a href=""><i class="ion-ios-analytics myIcon"></i></a> <a href=""><i class="ion-ios-color-wand myIcon"></i></a> </div> <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive"> </body> </html>
jQuery：如何記下side-nav的click-tab並在新頁面加載時使其變為彩色（活動）？
[英]jQuery: How can I remember clicked-tab of side-nav and make it colored(active) when newly page loaded?
在某些情況下，如何防止側面導航的第一個元素隱藏在頂部導航下？
[英]How can I prevent the first element of a side-nav from hiding under the top nav under certain conditions?
如何將我的粘性側邊導航放置在我的部分中，但使其對所有部分都可滾動？
[英]How can i place my sticky side-nav inside my section but make it scrollable for all sections?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.