html5 - 怎么拉长一个div的高度
天蓬老师
天蓬老师 2017-04-17 11:47:10
0
13
1389

请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个p太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?
我希望的效果如下

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(13)
黄舟
$(".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; }
PHPzhong

最小高度

PHPzhong
  1. 可以設定一個最小高度來撐起空白區域的內容高度,如min-height:300px;

  2. 但是min-height屬性在IE6下不被支持,不過透過處理可以獲得支持,程式碼如下

min-height:300px;
height:auto !important;
height:300px;
刘奇

@screen

伊谢尔伦

最小高度可用,但是未必可以保持最好的顯示效果,還是建議採用js來識別當前頁面高度的方法用比例設定高度

大家讲道理

可以試試看:min-height

巴扎黑

樓主可以包裹這段文字加上一個margin-bottom試試

迷茫

給予p一個min-height屬性,可以使其在最大屏時,仍能保持一定高度。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!