float: left;を使ってBOXで横並べした時、下記のようになり、揃えたいと思いますよね。
サンプルソース
-----------------------------------------------------
<head>
<title>test</title>
<style type="text/css">
<!--
div#box {
width: 400px;
margin: 0 auto;
}
div#box_left {
width: 200px;
background: red;
float: left;
}
div#box_right {
width: 200px;
background: blue;
float: left;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="box_left">
<p>テキスト1-1</p>
<p>テキスト1-2</p>
</div><!--box_left-->
<div id="box_right">
<p>テキスト2-1</p>
<p>テキスト2-2</p>
<p>テキスト2-3</p>
<p>テキスト2-4</p>
<p>テキスト2-5</p>
<p>テキスト2-6</p>
<p>テキスト2-7</p>
<p>テキスト2-8</p>
</div><!--box_right-->
</div><!--box-->
</body>
</html>
-----------------------------------------------------
下記のように揃えることが出来ます。
揃える方法は、下記サンプルの赤字部分を追加しています。
サンプルソース
-----------------------------------------------------
<head>
<title>test</title>
<style type="text/css">
<!--
div#box {
width: 400px;
margin: 0 auto;
overflow: hidden;
}
div#box_left {
width: 200px;
background: red;
float: left;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
div#box_right {
width: 200px;
background: blue;
float: left;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="box_left">
<p>テキスト1-1</p>
<p>テキスト1-2</p>
</div><!--box_left-->
<div id="box_right">
<p>テキスト2-1</p>
<p>テキスト2-2</p>
<p>テキスト2-3</p>
<p>テキスト2-4</p>
<p>テキスト2-5</p>
<p>テキスト2-6</p>
<p>テキスト2-7</p>
<p>テキスト2-8</p>
</div><!--box_right-->
</div><!--box-->
</body>
</html>
-----------------------------------------------------
そこで、<a name="〜"> タグでページ内ジャンプを追加しました。
下記サンプルソースの赤字部分を追加しました。サンプルソース
-----------------------------------------------------
<head>
<title>test</title>
<style type="text/css">
<!--
div#box {
width: 400px;
margin: 0 auto;
overflow: hidden;
}
div#box_left {
width: 200px;
background: red;
float: left;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
div#box_right {
width: 200px;
background: blue;
float: left;
}
-->
</style>
</head>
<body>
<a href="#2-5">2-5へジャンプ</a> <div id="box">
<div id="box_left">
<p>テキスト1-1</p>
<p>テキスト1-2</p>
</div><!--box_left-->
<div id="box_right">
<p>テキスト2-1</p>
<p>テキスト2-2</p>
<p>テキスト2-3</p>
<p>テキスト2-4</p>
<p>
<a name="2-5">テキスト2-5
</a></p>
<p>テキスト2-6</p>
<p>テキスト2-7</p>
<p>テキスト2-8</p>
</div><!--box_right-->
</div><!--box-->
</body>
</html>
-----------------------------------------------------
リンクをクリックしたら、画面が変な状態になりました。
テキスト2−5が上に表示されたのですが、スクロールバーがなく、テキスト2−4などが表示されなくなりました。
ではどうしたら治るのか?
色々実験していて、問題を見つけました。
これで治りました。ちゃんとスクロールバーも下の方にあり、上にスクロールすることが出来ます。
下記サンプルの赤字部分を消すことにより治ります。
原因は、overflow: hidden を指定することにより、ジャンプした先を基準に表示してしまうようで、上の部分は、座標がマイナス部分に存在しているみたいです。スクロールが出来ないよ!
主要ブラウザー全てで発生します。
サンプルソース
-----------------------------------------------------
<head>
<title>test</title>
<style type="text/css">
<!--
div#box {
width: 400px;
margin: 0 auto;
/* overflow: hidden; */
}
div#box_left {
width: 200px;
background: red;
float: left;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
div#box_right {
width: 200px;
background: blue;
float: left;
}
-->
</style>
</head>
<body>
<a href="#2-5">2-5へジャンプ</a>
<div id="box">
<div id="box_left">
<p>テキスト1-1</p>
<p>テキスト1-2</p>
</div><!--box_left-->
<div id="box_right">
<p>テキスト2-1</p>
<p>テキスト2-2</p>
<p>テキスト2-3</p>
<p>テキスト2-4</p>
<p><a name="2-5">テキスト2-5</a></p>
<p>テキスト2-6</p>
<p>テキスト2-7</p>
<p>テキスト2-8</p>
</div><!--box_right-->
</div><!--box-->
</body>
</html>
-----------------------------------------------------
pr:今年の夏は、省エネ対策を!売れてます!
接触冷感ひんやりタッチ + アウトラスト(R)使用 快適快眠クール敷パッド