ブロックレベル要素の高さを揃える - 実践するWEBサイト制作

☆★データーでの確認★☆

ブロックレベル要素の高さを揃える方法あれこれ | THE HAM MEDIA BLOG

高さの違うボックスを同じ高さにしたい。

ブロックレベル要素の高さを揃える方法あれこれ | THE HAM MEDIA BLOG

CSSで揃える方法

一度画面がはみ出るくらい長くpadding-bottomを指定してmargin-bottomでその幅を縮小。

あとは親要素にoverflow: hiddenを指定して、必要な範囲だけにする方法である。

32768pxっていう数値はIEの限界

borderを指定するとpadding-bottomが32768px下にあるため、見えなくなるためborder用の
を用意する。

backgroundで画像を指定して、bottomなど下から配置すると見えない。

ソースコード【 HTML 】

<!DOCYTPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSで自動で高さを変える</title>
<link rel="stylesheet" href="css/style2.css" media="all">

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<div class="container">
	<head>
  	<h1>CSSでheightを自動調整</h1>
	</head>
<div class="wrap_bg">
<div class="wraper clearfix">
	<nav>
		<ul>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
     	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
    	<li>リスト</li>
   </ul>
	</nav>
	<section>
  <h2>見出し</h2>
		<p><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文><br><本文><本文></p>
	</section>
</div>
<div class="nav_a"></div>
<div class="section_a"></div>
</div>
	<footer>
		<small>CSSで自動で高さを変える</small>
	</footer>
</body>
</html>

ソースコード【 CSS 】

@charset "utf-8";


.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;}

.container {width:960px; margin:0 auto; background-color:#CCC; overflow:hidden;}

h1 {text-align: center;}

.wrap_bg {
	background-color:#09F;
	overflow: hidden;}

.wraper {
	padding-bottom: 20px;
	background-color:#09F;
	overflow: hidden;}

nav,section {
	padding-bottom: 32768px;
	margin-bottom: -32768px;}

nav {
	width: 300px;
	float: left; 
	margin-left: 20px;
	border: 1px solid #F00;
	background-color: #96C;
	overflow: hidden;}


section {
	width: 600px;
	float: left; 
	margin-left: 20px;
	background-color: #6C0;
	overflow: hidden;}

.nav_a {
        width: 302px;
	height: 5px;
	float: left;
	margin-left: 20px;
	background-color: #000;}

.section_a {
	width: 600px;
	height: 5px;
	float: left;
	margin-left: 20px;
	background-color: #000;}

footer {
	height: 20px;
	text-align: center;}

ブラウザで表示【 FireFox 】

HTML5 Outliner【 Chrome 】

PAGE TOP