参考にさせて頂いたページ
意識が遠のく前にfooter下の隙間をなくすzzz|DOLCEZZA..* 2015年3月ママになりました♡
解決したい問題
PCのページの一番下に配置される要素に対して、:after疑似要素でclearfixをすると隙間ができたので解消したい。
隙間が無くなる書き方
.clearfix{
zoom:1;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;/* 隙間対応 */
font-size: 0.1em;/* 隙間対応 */
line-height: 0;/* 隙間対応 */
}
隙間ができてしまう書き方
これまでこのような書き方をしていました。
.clearfix{
zoom:1;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
おまけ(スマホ)
zoomとかそんなのも記述しなくていいし、たぶんこれだけで大丈夫なんじゃないかなと。
すぐ忘れちゃうので覚書。
.clearfix::after{
content: "";
display: block;
clear: both;
}