acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

positionで右にはみ出たときに横スクロールが出るのを防ぐ

ads

2012/8/7 初稿

positionを使って左右にはみ出たデザインにしたとき、下のサンプルのように左はみ出ている部分にははスクロールバーが出ませんが、右にはみ出ている部分にはスクロールバーが出てしまいます。

<body>
<div class="contents">コンテンツ部分
<div class="left">左</div>
<div class="fight">右</div>
</div>
</body>

.contents{
width:400px;
background: #cccccc;
position:relative;
margin:auto;
}
.left,.right{
width:50px;
height:50px;
background:#666666;
position:absolute;
}
.left{
left:-50px
}
.right{
right:-50px
}

はみ出た部分までスクロールバーが出てしまうのを防ぐためにbodyにoverflow: hidden;を指定します。
このままではcontents部分でもスクロールが出なくなってしまいます。これを防ぐためにbodyにmin-widthを指定します。

html{
overflow:auto;
}
body{
overflow: hidden;
min-width:400px;
}

上記のようにoverflow:hidden;とmin-widthを指定することで、右にはみ出たところまでスクロールバーが出てしまうのを防ぐことができるようになります。

Copyright (C) acky. All Rights Reserved.