sectionの高さが0になる

#困っている事
Wordpressでテーマ作成中です。
sectionで縦にいくつか分割しているのですが、
画面をある一定のサイズ以下にするとsectionの高さが無くなってしまいます。

具体的にGoogleデベロッパーツールで確認すると、
widthが755pxを下回るとこの現象が起き、

top-section
portfolio-section
about-section
contact-section

上記4セクションの内、top-section,portfolio-section(上の2つ)の高さが0になってしまいます。
CSSのメディアクエリが怪しいかと思い調べましたが755付近のブレイクポイントは見つかりませんでした。
CSSはBootstrapを使用しています。

どなたか原因が分かりますでしょうか？？
よろしくお願いします。

対象のサイト

コード↓

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset=UTF-8">
5	<meta name="description" content="Hirotaka OPriguchiのポートフォリオ">
6	<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
7	<title>Hocus Pocus</title>
8	<link href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/style.css" rel="stylesheet" media="screen">
9	<link rel="stylesheet" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/genericons/genericons.css" type="text/css" />
10	<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet">
11	<link href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet">
12				<script type="text/javascript">
13			window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/127.0.0.1:4001\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.4"}};
14			!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
15		</script>
16		<style type="text/css">
17img.wp-smiley,
18img.emoji {
19	display: inline !important;
20	border: none !important;
21	box-shadow: none !important;
22	height: 1em !important;
23	width: 1em !important;
24	margin: 0 .07em !important;
25	vertical-align: -0.1em !important;
26	background: none !important;
27	padding: 0 !important;
28}
29</style>
30<link rel='stylesheet' id='bootstrap-css-css'  href='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/css/bootstrap.min.css?ver=4.2.4' type='text/css' media='all' />
31<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
32<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
33<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1:4001/wordpress/xmlrpc.php?rsd" />
34<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://127.0.0.1:4001/wordpress/wp-includes/wlwmanifest.xml" /> 
35<meta name="generator" content="WordPress 4.2.4" />
36<link rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/favicon.ico" />
37
38	<script>
39	//スムーズスクロール
40	jQuery(function(){
41	   // #で始まるアンカーをクリックした場合に処理
42	   jQuery('a[href^=#]').click(function() {
43		  // スクロールの速度
44		  var speed = 350; // ミリ秒
45		  // アンカーの値取得
46		  var href= jQuery(this).attr("href");
47		  // 移動先を取得
48		  var target = jQuery(href == "#" || href == "" ? 'html' : href);
49		  // 移動先を数値で取得
50		  var position = target.offset().top;
51		  // スムーズスクロール
52		  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
53		  return false;
54	   });
55	});
56	</script>
57
58</head>
59<body>
60 
61	<div id="header">
62		<ul class="nav nav-pills active">
63			<li><a href="#contact">Contact</a></li>
64			<li><a href="#about">About</a></li>
65			<li><a href="#portfolio">Portfolio</a></li>
66		</ul>
67	</div> 
68	<section id="top">
69		<div class="col-xs-12">
70			<img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/sample.jpg" class="img-responsive">
71			<p class="title">Hirotaka Origuchi Photography</p>
72		</div>
73	</section>
74
75	<section id="portfolio">
76		<div class="container">
77			<div class="row mainlink">
78				<div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
79				<div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
80				<div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
81				<div class="col-md-6 col-xs-12"><a href="#"><img src="http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/img/test.jpg"></a></div>
82			</div>
83		</div>
84	</section>
85
86	<section id="about">
87		<h2 class="ab">About</h2>
88		<h4>~Hirotaka Origuchi~</h4>
89		<p>1995年生まれ、岡山県在住<br>2016年にカメラを始め、同年5月に<a href="https://lovegraph.me/">Lovegraph</a>にジョイン。<br>その夏からポートレート撮影を開始。<br>2017年10月より<br><a href="http://www.studioaim.jp/harajuku.html">creative photostudio aim</a>原宿店に勤務</p>
90		<h4>~Equipment~</h4>
91		<p>Canon EOS 6D<br>Canon EOS 80D<br>Sigma Art 135mm<br>Sigma Art 30mm<br>iPhone6S</p>
92 	</section>
93
94 	<section id="contact">
95 		<h2 class="co">Contact</h2>
96 		<h4>~E-Mail~</h4>
97 		<a href="mailto:lostsymbol612@gmail.com" class="mail">メールで連絡する</a>
98 		<h4>~SNS Link~</h4>
99 		<div class="table-responsive">
100				<table class="table">
101					<tr>
102						<td><a href="https://instagram.com/hirotaka612" class="sns">Instagram</a></td>
103						<td><a href="https://www.facebook.com/hocuspocusphotographer/" class="sns">Facebook</a></td>
104					</tr>
105					<tr>
106						<td><a href="https://500px.com/hirotaka612" class="sns">500px</a></td>
107						<td><a href="https://twitter.com/HocusPocusPhoto" class="sns">Twitter</a></td>
108					</tr>
109					<tr>
110						<td><a href="https://mstdn.tokyocameraclub.com/@HirotakaOriguchi" class="sns">Mstdn</a></td>
111						<td></td>
112					</tr>
113				</table>
114		</div>
115 	</section>
116
117<div id="footer">
118	<p class="copy">&copy;2017 Hirotaka Origuchi</p>
119	<a class="genericon genericon-collapse" href="#top"></a>
120</div>
121<script type='text/javascript' src='http://127.0.0.1:4001/wordpress/wp-content/themes/UnderDevelopment/lib/js/bootstrap.min.js?ver=1.0.0'></script>
122</body>
123</html>

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

回答1件

ベストアンサー

内包要素に float が設定されているため、その要素が高さ 0 になり、外側の要素も高さがなくなります。

こうするか、

CSS
1body > section {
2	overflow: hidden;
3}

こうするか。（bootstrap の使い方を探してみてください）

HTML
1<section id="top" class="row">

投稿2017/05/11 16:23

kei344

総合スコア69400

hirotaka612

2017/05/11 23:18

float:hiddenで治りました！ありがとうございました！ floatの仕様なんですかね？よく調べてみます。前回の質問に引き続き、お手数おかけしました。重ねてお礼申し上げます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

sectionの高さが0になる

関連した質問