首頁猿問 CSS圣杯布局頁腳問題

CSS圣杯布局頁腳問題

Html/CSS JavaScript

發(fā)霉的飯盒 2016-10-14 11:25:54

有一個頁面，是兩列圣杯布局（類似新浪微博），左邊是導(dǎo)航條，右邊隨內(nèi)容填充自適應(yīng)高度。使用了padding-bottom和padding-bottom來實現(xiàn)等高?，F(xiàn)在想在右邊底部添加頁腳，實現(xiàn)以下效果：如果右邊內(nèi)容高度比窗口小，則頁腳顯示在窗口底部；如果右邊內(nèi)容比窗口高（出現(xiàn)了滾動條），則頁腳顯示在右邊內(nèi)容的底部。請教要如何實現(xiàn)呢

查看完整描述

3 回答

已采納

Linda_Je

TA貢獻(xiàn)35條經(jīng)驗獲得超86個贊

js判斷窗口高度，定位從相對變更到fixed

反對回復(fù) 2016-10-14

發(fā)霉的飯盒
我也想過現(xiàn)在的問題主要是兩列布局等高使用的padding margin負(fù)補(bǔ)償跟這個方法感覺有點沖突

回復(fù) 2016-10-17
發(fā)霉的飯盒
用你的方法解決了謝謝

回復(fù) 2016-10-17
Linda_Je
<script type="text/javascript"> $(function(){ //獲取要定位元素距離瀏覽器頂部的距離 var navH = $(".menu").offset().top; //滾動條事件 $(window).scroll(function(){ //獲取滾動條的滑動距離 var scroH = $(this).scrollTop(); //滾動條的滑動距離大于等于定位元素距離瀏覽器頂部的距離，就固定，反之就不固定 if(scroH > navH){ $(".menu").addClass('fixed'); }else{ $(".menu").removeClass('fixed'); } console.log(scroH==navH); }); }); </script> 檢測菜單是否在頂部才看到，給你個栗子............哈哈

回復(fù) 2016-10-17

一朵大白天

TA貢獻(xiàn)54條經(jīng)驗獲得超14個贊

position: relative;

按照父元素計算top、left屬性值吧！就不用糾結(jié)什么內(nèi)外邊距值了。

反對回復(fù) 2016-10-15

發(fā)霉的飯盒
不是現(xiàn)在有個問題是因為右邊是自適應(yīng)的高度不定定位的話內(nèi)容過少就會顯示在窗口中間。而且為了讓左右等高，我用了padding margin補(bǔ)償所以也不能直接bottom定位

回復(fù) 2016-10-17

_bug終結(jié)者_(dá)

TA貢獻(xiàn)89條經(jīng)驗獲得超16個贊

使用定位

反對回復(fù) 2016-10-14

3 回答
1 關(guān)注
1725 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

CSS圣杯布局頁腳問題

CSS圣杯布局頁腳問題

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

CSS圣杯布局頁腳問題

CSS圣杯布局頁腳問題

3 回答

相關(guān)問題推薦

添加回答