【コード、画像有】cssの「fixed」を使用することで、レイアウトが崩れる原因を教えていただけませんか。

サイト内に、スクロールによって追従するサイドメニューを作りたいと思います。（ＰＣ専用）

その際に、スクロール位置によってcssの「position:fixed」を追加しサイドメニューを固定したいと思うのですが、
fixedを使用することでよくわからないレイアウト崩れが起きてしまいました。画像とコードで状況をお伝えしますので、よろしければご一緒に考えて頂ければ幸いです。

【現在の状況】

まずは背景色で簡単に位置分けをしております。左がサイドメニューです。

HTML
1<!DOCTYPE html>
2<html lang="ja-JP">
3<head>
4<meta charset="UTF-8">
5<title>test</title>
6</head>
7<style type="text/css">
8
9.main{
10	width:800px;
11	margin:0 auto;
12}
13
14.clearfix:after{
15	content:"";
16	display:block;
17	clear:both;
18}
19
20.main > div{
21	float:left;
22	box-sizing:border-box;
23}
24
25.content{
26	width:80%;
27	background-color:#CCC;
28	height:2000px;
29}
30
31.side{
32	width:20%;
33	height:500px;
34}
35
36.side-in{
37	background-color:#EEE;
38}
39
40.fixed{
41	position:fixed;
42}
43
44</style>
45<body>
46
47<div class="main clearfix">
48	<div class="side">
49		<div class=""> <!-- ここにfixedを入れる -->
50			<div class="side-in">
51				こちらがサイドメニューになります
52			</div>
53		</div>
54	</div>
55	<div class="content">
56		ここはメインコンテンツ
57	</div>
58</div>
59
60</body>
61</html>

薄いグレーになっている部分がサイドメニューの領域で、「こちらがサイドメニューになります」という文章を入れています。

この状態で、.side-inの親要素に.fixedを追加を追加すると、

このようになぜか大元の.sideを横幅をはみ出してしまいます。
word-break: break-allなどを利用してもこの状況は改善されませんでした。

.fixedを追加させても、「こちらがサイドメニューになります」を.sideの領域の中で折り返しを行いたいのですが、その場合はどのような記述を行えばいいのでしょうか。

実験はfirefox,chromeで確認しています。コードはコピーで画像のような状況を再現できます。

どなたかご教示お願いします。

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

回答2件

ベストアンサー

<div class="side"> ここで幅指定をしてそのあと <div class="fixed">  ここでfixed(スクロールも無視した固定)をしているので

その内側だけが固定されています。固定されている領域は文字列とその周囲で、サイドメニュー自体は固定されていません。
試しに色を付けてみるとわかりやすいと思います。

css
1.side{
2    width:20%;
3    height:500px;
4    background-color:#ff0000;
5}

一つ上のタグではなく画面に依存したサイズになっていることがわかると思います。
これでは折り返しません。

解消するには、サイドのクラス指定で一緒にfixedを指定して(もしくはsideにfixedを含める)

html
1<div class="side fixed">

そのままだとサイドメニューが画面の大きさに依存してしまうので絶対値で幅を固定して

css
1.side{
2    width:160px;
3    height:500px;
4    background-color:#ff0000;
5}

コンテンツが一番左に来てしまうので左にマージンを空けて

css
1.content{
2    width:80%;//(ここも横幅固定でOK)
3    background-color:#CCC;
4    height:2000px;
5    margin-left:20%;
6}

あとところどころ調整すればしっかりと動くと思います。

ただこれをしてしまうと、小さい画面で閲覧しようとすると固定されたサイドメニューが邪魔をしてメインコンテンツが見れなくなることも。
フレームを使って分割して、左右とも自由にサイズ変更できるようにしたり、左右のスクロールのみ許容する(javascriptが必要?)などするとより良いページになると思います。

投稿2016/07/29 05:35