<p>有的时候内容少，footer部分也跟着展示在中间很是影响美观，直接固定底部在正文内容增加的时候又会遮住正文内容，于是想到通过js动态实现footer部分是否固定定位在底部</p><p>具体实现代码如下：</p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;">.<span style="color:#a6e22e;">fixbottom</span>{<br/> <span style="color:#66d9ef;font-style:italic;">position</span>: <span style="color:#68e868;font-weight:bold;">fixed</span>;<br/> <span style="color:#66d9ef;font-style:italic;">bottom</span>: <span style="color:#ae81ff;">0</span>;<br/> <span style="color:#66d9ef;font-style:italic;">left</span>: <span style="color:#ae81ff;">0</span>;<br/> <span style="color:#66d9ef;font-style:italic;">right</span>: <span style="color:#ae81ff;">0</span>;<br/> <span style="color:#66d9ef;font-style:italic;">width</span>: <span style="color:#ae81ff;">100</span><span style="color:#74ab30;">%</span>;<br/>}</pre><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;"><<span style="color:#c32867;font-weight:bold;">div </span><span style="color:#a6e22e;">class</span><span style="color:#e6db74;font-weight:bold;">="foot"</span>><br/> <<span style="color:#c32867;font-weight:bold;">p</span>>底部部分演示</<span style="color:#c32867;font-weight:bold;">p</span>><br/></<span style="color:#c32867;font-weight:bold;">div</span>></pre><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;"><<span style="color:#c32867;font-weight:bold;">script </span><span style="color:#a6e22e;">type</span><span style="color:#e6db74;font-weight:bold;">="application/javascript"</span>><br/> <span style="color:#f92672;">if</span>((<span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#e6db74;">'</span><span style="color:#e6db74;background-color:#191f26;">.foot</span><span style="color:#e6db74;">'</span>)[<span style="color:#ae81ff;">0</span>].<span style="color:#660e7a;font-weight:bold;">offsetHeight</span><span style="color:#f92672;">+</span><span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#e6db74;">'</span><span style="color:#e6db74;background-color:#191f26;">.foot</span><span style="color:#e6db74;">'</span>)[<span style="color:#ae81ff;">0</span>].<span style="color:#660e7a;font-weight:bold;">offsetTop</span>)<span style="color:#f92672;"><</span><span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>).<span style="color:#4ac60a;">height</span>()){<br/> <span style="color:#660e7a;font-weight:bold;">$</span>(<span style="color:#e6db74;">'</span><span style="color:#e6db74;background-color:#191f26;">.foot</span><span style="color:#e6db74;">'</span>).<span style="color:#4ac60a;">addClass</span>(<span style="color:#e6db74;">'fixbottom'</span>);<br/> }<br/></<span style="color:#c32867;font-weight:bold;">script</span>></pre><p><br/></p>
相关文章
