请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个p太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?我希望的效果如下
欢迎选择我的课程,让我们一起见证您的进步~~
$(".pClassName").css("height",$(document).height());
這樣可以定義某個p的高度跟頁面大小一致,如果用js,注意以下問題:document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度document.documentElement.clientWidth ==> 可見區域寬度document.documentElement.clientHeight ==> 可見區域高度
子元素的p高度,以百分比設定,會根據父元素的高度自動調整。 如果還是變化太大,可以透過@media screen and (max-width:1000px) {} 這樣的方法給不同範圍的寫不同的樣式
一個就是和樓上說的一樣設定一個min-height 還有一個可以適應不同大小螢幕的方法:在頁面載入時用js取得目前body的高度,然後根據你的需要,設定p高度為body高度的百分之幾,這樣不管螢幕解析度大小是多少,看起來比例都會是一樣的。
用絕對定位即可。
.main-nav { heigth: 80px; } .content {position: absolute; top: 90px; bottom: 0; }
最小高度
可以設定一個最小高度來撐起空白區域的內容高度,如min-height:300px;,
min-height:300px;
但是min-height屬性在IE6下不被支持,不過透過處理可以獲得支持,程式碼如下
min-height
min-height:300px; height:auto !important; height:300px;
@screen
最小高度可用,但是未必可以保持最好的顯示效果,還是建議採用js來識別當前頁面高度的方法用比例設定高度
可以試試看:min-height
樓主可以包裹這段文字加上一個margin-bottom試試
給予p一個min-height屬性,可以使其在最大屏時,仍能保持一定高度。
這樣可以定義某個p的高度跟頁面大小一致,如果用js,注意以下問題:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
子元素的p高度,以百分比設定,會根據父元素的高度自動調整。
如果還是變化太大,可以透過@media screen and (max-width:1000px) {} 這樣的方法給不同範圍的寫不同的樣式
一個就是和樓上說的一樣設定一個min-height 還有一個可以適應不同大小螢幕的方法:在頁面載入時用js取得目前body的高度,然後根據你的需要,設定p高度為body高度的百分之幾,這樣不管螢幕解析度大小是多少,看起來比例都會是一樣的。
用絕對定位即可。
最小高度
可以設定一個最小高度來撐起空白區域的內容高度,如
min-height:300px;
,但是
min-height
屬性在IE6下不被支持,不過透過處理可以獲得支持,程式碼如下@screen
最小高度可用,但是未必可以保持最好的顯示效果,還是建議採用js來識別當前頁面高度的方法用比例設定高度
可以試試看:
min-height
樓主可以包裹這段文字加上一個margin-bottom試試
給予p一個min-height屬性,可以使其在最大屏時,仍能保持一定高度。