重なってしまう要素を直したいです。html5・CSS3

headerのスライドショーの要素が、同じheader内のバナー要素とmain要素に重なってしまうのを直したいのです。
バナーは増えたり減ったりする予定なので、いちいちCSSをの高さを変更しなくてもいいようにしたいのですが、現状はバナーが増えたり減ったりする度に、

main内の
1#main{
2  display: -webkit-flex;
3  display: flex;
4  max-width: 1080px;
5  margin: 0 auto;
6  padding-top:600px;
7}
8
9@media screen and (max-width:750px) {
10	#main{
11		display:block;
12		padding-top:400px;
13	}
14}

上のpadding-top:○○px;をPCスマホ両方変更しないと要素が重なってしまいます。
これを直す方法を教えて欲しいですm(_ _)m

html
1<!doctype html>
2		
3<html lang="ja">
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
7	<meta name="format-detection" content="telephone=no">
8	<meta name="Description" content="" />
9	<meta name="Keywords" content="" />
10	<link rel="stylesheet" href="css/main.css">
11	<link rel="icon" href="favicon.ico">
12	<!--スライドショーstart-->
13	<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
14	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
15	<script type="text/javascript">
16	$(function(){
17		var setId = '#slideshow';
18		var fadeTime = 500;
19		var delayTime = 2500;
20
21		$(setId + ' div div').each(function(i){
22			$(this).attr('id','view' + (i + 1).toString());
23			$(setId + ' div div').css({zIndex:'98',opacity:'0'});
24			$(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
25		});
26
27		$(setId + ' ul li').click(function(){
28			clearInterval(setTimer);
29
30			var connectCont = $(setId + ' ul li').index(this);
31			var showCont = connectCont+1;
32
33			$(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
34			$(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});
35
36			$(this).addClass('active');
37			$(this).siblings().removeClass('active');
38
39			timer();
40
41		});
42
43		$(setId + ' ul li:not(.active)').hover(function(){
44			$(this).stop().animate({opacity:'1'},200);
45		},function(){
46			$(this).stop().animate({opacity:'0.5'},200);
47		});
48
49		$(setId + ' ul li').css({opacity:'0.5'});
50		$(setId + ' ul li:first').addClass('active');
51
52		timer();
53
54		function timer() {
55			setTimer = setInterval(function(){
56				$('li.active').each(function(){
57					var listLengh = $(setId + ' ul li').length;
58					var listIndex = $(setId + ' ul li').index(this);
59					var listCount = listIndex+1;
60
61					if(listLengh == listCount){
62						$(setId + ' ul li:first').click()
63					} else {
64						$(this).next('li').click();
65					};
66				});
67			},delayTime);
68		};
69
70		// hoverでスライド動作ストップ
71		$(setId).mouseover(function(){
72			clearInterval(setTimer);
73		}).mousemove(function(){
74			clearInterval(setTimer);
75		}).mouseout(function(){
76			timer();
77		});
78
79	});
80	</script>
81	<!--スライドショーend-->
82<title>無題ドキュメント</title>
83</head>
84
85<body>
86<div id="wrapper">
87<header id="header">
88
89  <div id="container">
90	  バナー<br>
91	  バナー<br>
92	  <!--スライドショーstart-->
93	<div id="slideshow">
94
95	<div class="slideshow1">
96	<div class="slideshow1-1"><a href="#"><img src="img/photo01.jpg" width="100%" alt="" /></a></div>
97	<div class="slideshow1-1"><a href="#"><img src="img/photo02.jpg" width="100%" alt="" /></a></div>
98	<div class="slideshow1-1"><a href="#"><img src="img/photo03.jpg" width="100%" alt="" /></a></div>
99	<div class="slideshow1-1"><a href="#"><img src="img/photo04.jpg" width="100%" alt="" /></a></div>
100	</div>
101	<!--サムネイルstart-->
102	<div class="thumbnail">
103	<ul>
104	<li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li>
105	<li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li>
106	<li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li>
107	<li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li>
108	</ul>
109	</div>
110	<!--サムネイルend-->
111	</div>
112	<!--/#slideshow-->
113	  
114	</div>
115	<!--/#container-->
116	<!--スライドショーeng-->
117</header>
118<main id="main">
119 <article id="article">
120  main
121 </article>
122 <aside id="aside">
123	 <nav id="nav">nav</nav>
124	 side
125 </aside>
126</main>
127 <footer id="footer">
128  footer</footer>
129</div>
130</body>
131</html>
132

main.css
1@charset "utf-8";
2/* CSS Document */
3
4
5/*サイト全体の指定*/
6
7body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote{margin:0;padding:0;}
8h1,h2,h3,h4,h5{font-size:100%;}
9ol,ul{list-style:none;}
10
11body{
12	font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
13	font-weight: 400;
14	font-style: normal;
15	width:100%;
16	text-align: center;
17	background-color:#f0f0f0;
18	margin: 0px;
19	color: #6a696c;
20	font-size: 1em;
21	line-height: 1em;
22	height: 100%;
23	letter-spacing: 0.2em;
24}
25
26a:link {color:#6a696c; text-decoration: underline;} /*未訪問のリンクの色*/
27a:visited {color:#6a696c;} /*訪問済みのリンクの色*/
28a:hover {opacity: 0.5;} /*カーソルが乗っているリンクの色*/
29a:active {opacity: 0.5;} /*クリック中のリンクの色*/
30
31#wrapper {
32　width: 100%;
33	margin: 0 auto;
34}
35
36/*ヘッダー*************************************/
37
38#header{
39  width: 100%;
40  margin-bottom: 5px;
41  height: 50px;
42  background: #faa;
43}
44
45
46/*スライドショー*/
47
48#container {
49	width: 100%;
50}
51
52#slideshow {
53	margin: 0 auto;
54	width: 100%;
55}
56
57#slideshow .slideshow1 {
58	width: 100vw;
59	height: 500px;
60	overflow: hidden;
61	position: relative;
62}
63
64@media screen and (max-width:750px) {
65	#slideshow .slideshow1{
66		height: 300px;
67	}
68}
69
70#slideshow .slideshow1-1 {
71	top: 0;
72	left: 0;
73	position: absolute;
74}
75
76
77div.thumbnail{
78	margin-top:5px;
79}
80
81#slideshow ul {
82	width: 420px;
83	margin: 0 auto;
84}
85
86#slideshow ul li {
87	width: 100px;
88	float: left;
89	display: inline;
90	margin-right: 5px;
91}
92
93#slideshow .active {
94	filter:alpha(opacity=100)!important;
95	-moz-opacity: 1!important;
96	opacity: 1!important;
97}
98
99
100/* =======================================
101	ClearFixElements
102======================================= */
103#slideshow ul:after {
104	content: ".";
105	height: 0;
106	clear: both;
107	display: block;
108	visibility: hidden;
109}
110
111#slideshow ul {
112	display: inline-block;
113	overflow: hidden;
114}
115
116
117
118
119/* =======================================
120	ClearFixElements
121======================================= */
122#slideshow02 ul:after {
123	content: ".";
124	height: 0;
125	clear: both;
126	display: block;
127	visibility: hidden;
128}
129
130#slideshow02 ul {
131	display: inline-block;
132	overflow: hidden;
133}
134
135
136/*メイン全体***********************************/
137
138#main{
139  display: -webkit-flex;
140  display: flex;
141  max-width: 1080px;
142  margin: 0 auto;
143  padding-top:550px;
144}
145
146@media screen and (max-width:750px) {
147	#main{
148		display:block;
149		padding-top:350px;
150	}
151}
152
153/*左カラム************************************/
154
155#article{
156  -webkit-flex: 1;
157  flex: 1;
158  vertical-align: top;
159  text-align: left;
160  margin-bottom: 5px;
161  margin-right: 5px;
162  height: 100px;
163  background: #afa;
164}
165
166/*右カラム************************************/
167
168#aside{
169  display: table-cell;
170  vertical-align: top;
171  text-align: left;
172  width: 300px;
173  margin-bottom: 5px;
174  height: 100px;
175  background: #aaf;
176
177}
178
179/*ナビ*/
180
181#nav{
182}
183
184
185
186@media screen and (max-width:750px) {
187	#nav{
188		display:none;
189	}
190}
191
192
193/*フッダー************************************/
194
195#footer{
196  width: 100%;
197  height: 50px;
198  background: #ffa;
199}
200

screen
1@charset "utf-8";
2
3/* ----------------------------------------------
4
5	import CSS
6
7---------------------------------------------- */
8
9
10/*  IMPORT
11---------------------------------------------- */
12@import url("base.css");
13@import url("common.css");

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

回答1件

ベストアンサー

このような形でいかがでしょうか?

HTML
1<header id="header">
2  <div class="header-inner"><!-- このタグを追加 -->
3      バナー<br>
4      バナー<br>
5  </div>
6  <div id="container">
7      <!--スライドショーstart-->
8    <div id="slideshow">
9
10    <div class="slideshow1">
11    <div class="slideshow1-1"><a href="#"><img src="img/photo01.jpg" width="100%" alt="" /></a></div>
12    <div class="slideshow1-1"><a href="#"><img src="img/photo02.jpg" width="100%" alt="" /></a></div>
13    <div class="slideshow1-1"><a href="#"><img src="img/photo03.jpg" width="100%" alt="" /></a></div>
14    <div class="slideshow1-1"><a href="#"><img src="img/photo04.jpg" width="100%" alt="" /></a></div>
15    </div>
16    <!--サムネイルstart-->
17    <div class="thumbnail">
18    <ul>
19    <li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li>
20    <li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li>
21    <li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li>
22    <li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li>
23    </ul>
24    </div>
25    <!--サムネイルend-->
26    </div>
27    <!--/#slideshow-->
28
29    </div>
30    <!--/#container-->
31    <!--スライドショーeng-->
32</header>
33

CSS
1#header{
2  width: 100%;
3  margin-bottom: 5px;
4  /* height: 50px; */
5  /* background: #faa; */
6}
7#header .header-inner{
8  height: 50px;
9  background: #faa;
10}