高さ100％のレスポンシブルのコンテナの下と次のブロック要素の隙間をなくしたい

<body>のすぐ下に ``` <div class="codrops-top clearfix"> <span class="right"> </span> <span class="right"> </span> <span class="right"> </span> </div>

        <div id="slider" class="sl-slider-wrapper">

			<nav id="nav-arrows" class="nav-arrows">
				<span class="nav-arrow-prev">Previous</span>
				<span class="nav-arrow-next">Next</span>
			</nav>

			<nav id="nav-dots" class="nav-dots">
				<span class="nav-dot-current"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>					
			</nav>

		</div><!-- /slider-wrapper -->

    </div><!-- mainslider_container -->

コード

にレスポンシブルのスライダーが入ったコンテナを設置しました。

```ここに言語を入力
.container.demo-1 {
	height: 100%;
	position: absolute;

CSSでスライダーの高さは、ファーストビューで画面高さいっぱいになります。
そのあとにつぎのブロックをおきました。

<div class="uppercontents">
<!-- サーチボックス-->
  <div class="search-postage">
    <div class="search-layout">
      <p>何かお探しですか？ FIND MORE ?</p>
      <form name="form" method="get" action="#">
        <input name="p" type="text" class="text" value="" size="40">
        <div class="searchbutton">
          <input type="submit" value="検索" onClick="void(this.form.submit());return false;">
        </div>
      </form>
      <br class="clear" />
    </div>
  </div>
</div>
	<!-- サーチボックス-->

CSSは

.uppercontents {
	max-width: 1050px; 
    margin-right: auto; 
	margin-left: auto;
	padding-top: 923px; /*--24incモニタ対応--*/
}
コード

としています。padding-topを入れなかった場合、次のブロックの上端が、上のスライダーのコンテナのしたに隠れてしまうため、仕方なく、24インチのモニターでみたときにも出てくるように上にマージンをとっています。

しかし、スマホiphone Xsafariなどで見たときには、ファーストビューのスライダーは問題なく表示されても、次のブロックと間に大きなスペースができてしまっています。
923pxをとっていることが原因だとは思いますが、どのデバイスでみても、スライダーのすぐ下に次のブロックが続くように表示させることはできますでしょうか？

初心者なので、あれこれCSSを触ってはみましたが、うまく解決できません。どうぞよろしくお願いします。

実装サイト

yoshinavi

2018/10/14 06:08

スライダー部に高さを持った親要素を設定した方が良いのではないでしょうか？

dreamliner1977

2018/10/14 09:01

こんにちは。高さをはっきりと指定すると、PCで見たときにはOKでも、SPでみるとものすごく縦に長いスライダになりませんでしょうか？技術がないので、そういう考えてしまうのですが、違うのでしょうか？自分では、よくわかっておりません、すみません！

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

回答1件

ベストアンサー

今はpaddint-topをcssの方で固定値で指定しているので幅が変わったときに隙間が広がってますね。

そこで今回の解決策！！
スライダーの高さをJavascriptで取得してpadding-topに取得した値を代入するのはいかがでしょうか？？

レスポンシブということですので、処理の流れとしては
初回読み込みのときは、onloadイベントでスライダーの高さを取得しその後はresizeイベントでスライダーの高さを取得します。

もし書き方が分からなければ何がわからないか返信ください。

投稿2018/10/13 11:36

退会済みユーザー

総合スコア0

dreamliner1977

2018/10/13 11:44

こんばんは。早速のご返信ありがとうございます。つまり、レスポンシブルのスライダーは高さがデバイスによって変動しているため、したのpaddingの値も本来は、その高さのプラスαにならなければならないということですよね。理屈は大変よくわかりました。とはいうものの、まるで知識がないため、自分で今作っているのも、サンプルを見ながらチマチマやっているレベルでございます（汗）この下に、iframeを置いてヘッダーに  <script type="text/javascript"> function adjust_frame_css(F){ if(document.getElementById(F)) { var myF = document.getElementById(F); var myC = myF.contentWindow.document.documentElement; var myH = 1700; if(document.all) { myH = myC.scrollHeight; } else { myH = myC.offsetHeight; } myF.style.height = myH+"px"; } } 　　 </script> こんな感じのことを書いてiframeの高さを調整しているので、同じような理屈かなあというのはなんとなくわかるのですが、ここのソースも調べてきた受け売りなのでさっぱりです。ご教授いただければ、幸いです。

dreamliner1977

2018/10/13 11:44

常時、少しだけスペースを空けて、検索窓がしたにくればそれでOKとなります。

退会済みユーザー

2018/10/13 12:14 編集

あまりインターネット上に落ちているものを使用するのはオススメしません。最初のうちはわからないなりに簡単なものから作っていくと力が徐々に付いてきますよ(*´ω｀*) 一応質問者様が記載したコードで読込したときの高さは取得できているように思います。画面幅を変更したときの処理を簡単に書いてみたので参考にしてみてください。私の方で用意したサンプルは要素の高さを取得した値をテキストとして表示させています。質問者様の場合はpadding-topに取得した値を代入すれば良いので。。。 el.style.paddingTop = 取得した値; となります！ https://jsfiddle.net/ugy5wno4/5/

dreamliner1977

2018/10/14 08:37

こんにちは。お忙しい中、ご返信を頂きありがとうございます。よくわからなかったところが解決し、すっきり眠れそうです。おっしゃる通りですね。学生事態20年くらい前にhtmlを触って以来、まだDWさえ感覚でさわっているので、皆様のような深い知識もなく、いまは自分で何もかもをやっているので、できるだけ更新が楽になるようにレスポンシブルにしたくて組み立てました。ちょっとずついろんなことを積み重ねて、前に進んでいるので、引き続き、勉強しながら自分なりに進めていこうと思います。大変ご丁寧なご指導で、助かりました。ありがとうございました。

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