googleadservices がデザインを破壊する
GoogleAdservicesのトラッキングコードを入れると、消去できない余白がサイトの下にできてしまう問題があります。悪さしているのは、
<script src="https://www.googleadservices.com/pagead/conversion.js" type="text/javascript">
というタグで、</body>タグの直前に幅300px、高さ13pxのiframeを挿入します。
このiframeタグに何らかのclassが付与されているのなら簡単に対処できるのですが、それがないため途方に暮れていました。
ぐぐった結果
主犯のscriptタグをdivで囲み、そのdivタグにdisplay:none;することで消せるよ、という情報が得られました。
（参考）
試してみると確かに消えます。
が、display:none;を使うのはちょっとこわいなと。
私はdisplay:none;は存在そのものを消すコードだと認識しているので、もしかしたらこのスクリプトが動かなくなったりしないかという心配があったのです。
存在は残しつつ、高さを潰す
とはいえ、これでdivで囲んだスクリプトコードが、出力されるiframeを囲んでくれることが分かったので、これの高さを消してしまえばよいだろう、というわけで以下の方法で解決しました。
<div style="height: 0; line-height: 0; margin: -20px 0 0 0; padding: 0;"> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script> </div>
面倒だったのでインラインスタイルで書いていますが、classを付与してもいいはず。
要素の高さ、1行の高さを0にして、それでも発生する余白をネガティブマージンで消去しています。
Firefoxなどではネガティブマージン値は-13pxでちょうどなんですが、Mac用Chromeは行の高さを0にするなど、文字を表示させない命令を無視する傾向があるため、余裕を持たせて-20pxくらいにしています。これを大きな値にするとフッターの要素の上にかぶってしまい、フッターのリンクをクリック不能にされてしまう可能性もあるため注意が必要です。
他の方法として、position:absolute;を適用して邪魔にならないところに飛ばす方法も取れるのではないかと思います。
