fix(client): Fix #6526
This commit is contained in:
		
							parent
							
								
									9d3beb3174
								
							
						
					
					
						commit
						e7f1ab2d01
					
				
					 4 changed files with 22 additions and 6 deletions
				
			
		|  | @ -375,7 +375,8 @@ export default Vue.extend({ | |||
| 	$left-widgets-hide-threshold: 1600px; | ||||
| 	$right-widgets-hide-threshold: 1090px; | ||||
| 
 | ||||
| 	min-height: 100vh; | ||||
| 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 	min-height: calc(var(--vh, 1vh) * 100); | ||||
| 	box-sizing: border-box; | ||||
| 	padding-top: $header-height; | ||||
| 
 | ||||
|  | @ -544,7 +545,8 @@ export default Vue.extend({ | |||
| 
 | ||||
| 			> .content { | ||||
| 				> * { | ||||
| 					min-height: calc(100vh - #{$header-height}); | ||||
| 					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height}); | ||||
| 					box-sizing: border-box; | ||||
| 					padding: var(--margin); | ||||
| 
 | ||||
|  | @ -597,7 +599,8 @@ export default Vue.extend({ | |||
| 			&.fixed { | ||||
| 				position: sticky; | ||||
| 				overflow: auto; | ||||
| 				height: calc(100vh - #{$header-height}); | ||||
| 				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 				height: calc((var(--vh, 1vh) * 100) - #{$header-height}); | ||||
| 				top: $header-height; | ||||
| 			} | ||||
| 
 | ||||
|  | @ -620,7 +623,8 @@ export default Vue.extend({ | |||
| 			> .container { | ||||
| 				position: sticky; | ||||
| 				height: min-content; | ||||
| 				min-height: calc(100vh - #{$header-height}); | ||||
| 				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 				min-height: calc((var(--vh, 1vh) * 100) - #{$header-height}); | ||||
| 				padding: var(--margin) 0; | ||||
| 				box-sizing: border-box; | ||||
| 
 | ||||
|  |  | |||
|  | @ -353,7 +353,8 @@ export default Vue.extend({ | |||
| 			left: 0; | ||||
| 			z-index: 1001; | ||||
| 			width: $nav-width; | ||||
| 			height: 100vh; | ||||
| 			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 			height: calc(var(--vh, 1vh) * 100); | ||||
| 			box-sizing: border-box; | ||||
| 			overflow: auto; | ||||
| 			background: var(--navBg); | ||||
|  |  | |||
|  | @ -211,7 +211,8 @@ export default Vue.extend({ | |||
| 	--margin: var(--marginHalf); | ||||
| 
 | ||||
| 	display: flex; | ||||
| 	height: 100vh; | ||||
| 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||||
| 	height: calc(var(--vh, 1vh) * 100); | ||||
| 	box-sizing: border-box; | ||||
| 	flex: 1; | ||||
| 	padding: $deckMargin 0 $deckMargin $deckMargin; | ||||
|  |  | |||
|  | @ -59,6 +59,16 @@ if (localStorage.getItem('theme') == null) { | |||
| 	applyTheme(lightTheme); | ||||
| } | ||||
| 
 | ||||
| //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 | ||||
| // TODO: いつの日にか消したい
 | ||||
| const vh = window.innerHeight * 0.01; | ||||
| document.documentElement.style.setProperty('--vh', `${vh}px`); | ||||
| window.addEventListener('resize', () => { | ||||
| 	const vh = window.innerHeight * 0.01; | ||||
| 	document.documentElement.style.setProperty('--vh', `${vh}px`); | ||||
| }); | ||||
| //#endregion
 | ||||
| 
 | ||||
| //#region Detect the user language
 | ||||
| let lang = localStorage.getItem('lang'); | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue