網頁RWD調整建議

rwd css

wingkawa 2020-03-30 11:05:50 ‧ 4541 瀏覽

我有一個接手上一個人寫的，像這樣的版型

有套bootstrap、考慮過一定程度的rwd、可於手機等直向裝置瀏覽

實際上row的內容不多，又用較大的解析度瀏覽時，所以看起來會像這樣，footer下方會有留空

以下是需要建議的部分:

業主希望footer可以置底: 我把footer拔出container，調一下css讓他置底，但換到直向裝置時，又會華麗地蓋到上面的row

想詢問有什麼方法可以達成
業主希望橫向裝置(PC瀏覽器)看的時候，row的位置能置中於h3跟footer，意即第一張圖的紅圈空白處應該要一樣高，這需求能用css辦到嗎?該怎麼做?

希望能盡量不要動太多刀，可以盡量給我方向就行，我會再去找方法做
感恩

froce iT邦大師 1 級 ‧ 2020-03-30 12:12:37 檢舉

沒在用BOOTSTRAP，但是這個你可以預留footer的高度，然後footer設成fixed，給row的container最大高度，超出內容時出現捲軸就行。

咖咖拉 iT邦好手 1 級 ‧ 2020-03-30 13:15:53 檢舉

補充 : class="fixed-bottom"
這是bootstrap 預設的CLASS

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-03-30 14:06:28

最佳解答

我個人的用法如下
一般如果要上下固定置頂置底的規劃。
我會先切好三個區塊。分別為HRADER main FOOTER

其中 HEADER 會用

<nav class="navbar navbar-inverse navbar-fixed-top">

<nav>

FOOTER 則用

<nav class="navbar navbar-inverse navbar-fixed-bottom">

<nav>

再來就是主頁面內容一定要用一個div先包起來。
再給與如下的css參數

    padding-top: 35px;      
    padding-bottom: 35px;

上面的參數得依照 HEADER 及 FOOTER 的高度分別設定。
如果不同解析度會產生不同高度的情況下。再配合media處理就好。

當其三個區塊定義好後。再將你要的內容放進去愛怎麼搞就怎麼搞了。

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

IT邦幫忙