ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

jQueryプラグイン「meanmenu」を使用しております。
このままだと背景が動くため、
jQueryでheader以外の部分にに
クラス「addfixed」を付与して「position:fixed」状態にし、
スクロールの高さを取得しました。

画面が大きい状態でみると問題は発生しませんが、
小さな画面で見た際、
メニュー部分の高さが見切れてしまいます。
しかもul部分のheightを「100vh」より大きな値にしても、
なぜかスクロールが見切れてしまいます。
なお、ul部分は「overflow-y: scroll」にした状態です。

どこの高さを操作すれば、きちんとメニュー部分が見切れずに入るのか、教えていただければ幸いです。
URL：
http://nakatakira.html.xdomain.jp/test/test2/

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<title></title>
6	<link href="meanmenu.css" rel="stylesheet" type="text/css" media="all">	
7	<style>
8body{
9	margin:0;
10	padding:0;
11}
12.main{
13	height: 170vh;
14	background: #C06;
15}
16footer{
17	height:30vh;
18	background: #303838;
19}
20header ul{
21	width: 100%;
22	height: 100vh;
23	overflow-y: scroll;
24	-webkit-overflow-scrolling:touch;
25}
26.addfixed{
27	position: fixed;
28	width: 100%;
29	height: 100%;
30	overflow:hidden;
31}
32	</style>
33</head>
34<body>
35	<header>
36		<nav class="mobilenav">
37			<ul class="gnav">
38				<li><a href="#">1</a></li>
39				<li><a href="#">2</a></li>
40				<li><a href="#">3</a></li>
41				<li><a href="#">4</a></li>
42				<li><a href="#">5</a></li>
43				<li><a href="#">6</a></li>
44				<li><a href="#">7</a></li>
45				<li><a href="#">8</a></li>
46				<li><a href="#">9</a></li>
47				<li><a href="#">10</a></li>
48			</ul><!--/.gnav_s-->
49		</nav>
50	</header>
51	<div class="background">
52		<div class="main">
53		</div>
54		<footer>
55		</footer>
56	</div>
57<script src="jquery-3.3.1.min.js"></script>
58<script src="jquery.meanmenu.js"></script>
59<script>// JavaScript Document
60$(function(){
61	//meanmenu
62	$('.mobilenav').meanmenu({
63    meanMenuContainer: "header", // メニューを表示させる位置
64    meanScreenWidth: '2000', // 表示させるウィンドウサイズ(ブレイクポイント)		
65	});
66	//meanmenu中、スクロール防止
67  var state = false;
68  var scrollpos;
69 
70  $('.meanmenu-reveal').on('click', function(){
71    if(state == false) {
72      scrollpos = $(window).scrollTop();
73      $('.background').addClass('addfixed').css({'top': -scrollpos});
74      $('header nav').addClass('open');
75      state = true;
76    } else {
77      $('.background').removeClass('addfixed').css({'top': 0});
78      window.scrollTo( 0 , scrollpos );
79      $('header nav').removeClass('open');
80      state = false;
81    }
82  });
83});
84</script>
85</body>
86</html>

CSS
1
2/*! #######################################################################
3
4	MeanMenu 2.0.7
5	--------
6
7	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
8
9####################################################################### */
10
11/* hide the link until viewport size is reached */
12a.meanmenu-reveal {
13	display: none;
14}
15
16/* when under viewport size, .mean-container is added to body */
17.mean-container .mean-bar {
18	float: left;
19	width: 100%;
20	position: fixed;/*relativeから変更*/
21	background: #0c1923;
22	padding: 4px 0;
23	min-height: 60px;/*変更*/
24	z-index: 999999;
25}
26
27.mean-container a.meanmenu-reveal {
28	width: 22px;
29	height: 22px;
30	padding: 13px 13px 11px 13px;
31	position: absolute;
32	top: 0;
33	right: 0;
34	cursor: pointer;
35	color: #fff;
36	text-decoration: none;
37	font-size: 16px;
38	text-indent: -9999em;
39	line-height: 22px;
40	font-size: 1px;
41	display: block;
42	font-family: Arial, Helvetica, sans-serif;
43	font-weight: 700;
44}
45
46.mean-container a.meanmenu-reveal span {
47	display: block;
48	background: #fff;
49	height: 3px;
50	margin-top: 3px;
51}
52
53.mean-container .mean-nav {
54	float: left;
55	width: 100%;
56	background: #0c1923;
57	margin-top: 44px;
58}
59
60.mean-container .mean-nav ul {
61	padding: 0;
62	margin: 0;
63	width: 100%;
64	list-style-type: none;
65}
66
67.mean-container .mean-nav ul li {
68	position: relative;
69	float: left;
70	width: 100%;
71}
72
73.mean-container .mean-nav ul li a {
74	display: block;
75	float: left;
76	width: 90%;
77	padding: 1em 5%;
78	margin: 0;
79	text-align: left;
80	color: #fff;
81	border-top: 1px solid #383838;
82	border-top: 1px solid rgba(255,255,255,0.5);
83	text-decoration: none;
84	text-transform: uppercase;
85}
86
87.mean-container .mean-nav ul li li a {
88	width: 80%;
89	padding: 1em 10%;
90	border-top: 1px solid #f1f1f1;
91	border-top: 1px solid rgba(255,255,255,0.25);
92	opacity: 0.75;
93	filter: alpha(opacity=75);
94	text-shadow: none !important;
95	visibility: visible;
96}
97
98.mean-container .mean-nav ul li.mean-last a {
99	border-bottom: none;
100	margin-bottom: 0;
101}
102
103.mean-container .mean-nav ul li li li a {
104	width: 70%;
105	padding: 1em 15%;
106}
107
108.mean-container .mean-nav ul li li li li a {
109	width: 60%;
110	padding: 1em 20%;
111}
112
113.mean-container .mean-nav ul li li li li li a {
114	width: 50%;
115	padding: 1em 25%;
116}
117
118.mean-container .mean-nav ul li a:hover {
119	background: #252525;
120	background: rgba(255,255,255,0.1);
121}
122
123.mean-container .mean-nav ul li a.mean-expand {
124	margin-top: 1px;
125	width: 26px;
126	height: 32px;
127	padding: 12px !important;
128	text-align: center;
129	position: absolute;
130	right: 0;
131	top: 0;
132	z-index: 2;
133	font-weight: 700;
134	background: rgba(255,255,255,0.1);
135	border: none !important;
136	border-left: 1px solid rgba(255,255,255,0.4) !important;
137	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
138}
139
140.mean-container .mean-nav ul li a.mean-expand:hover {
141	background: rgba(0,0,0,0.9);
142}
143
144.mean-container .mean-push {
145	float: left;
146	width: 100%;
147	padding: 0;
148	margin: 0;
149	clear: both;
150}
151
152.mean-nav .wrapper {
153	width: 100%;
154	padding: 0;
155	margin: 0;
156}
157
158/* Fix for box sizing on Foundation Framework etc. */
159.mean-container .mean-bar, .mean-container .mean-bar * {
160	-webkit-box-sizing: content-box;
161	-moz-box-sizing: content-box;
162	box-sizing: content-box;
163}
164.mean-remove {
165	display: none !important;
166}
167

行動規範の内容に同意します

回答1件

ベストアンサー

「.mean-container .mean-nav」に「margin-top: 44px;」がついているので、
「header ul」の高さを、100vhから44pxマイナス（もしくはもうちょっと大きくして微調整）すれば、見切れないと思います。

css
1header ul {
2    height: calc(100vh - 44px);
3}

投稿2018/03/11 09:20

kszk311

総合スコア3404

aki_

2018/03/11 09:34

ありがとうございます。 margin分プラスではするのではなく、マイナスするのですね。無事、下までスクロールすることができました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

関連した質問