1、dreamweaver中怎麼設置div的高度正好是滿屏啊?
設置DIV的高度為100%即可,將天南寫的代碼另存為html文件,然後運行測試: <html> <head> <style type="text/css"> body,html{height:100%;} #demo{height:100%;background:green;} </style> </head> <body> <div id="demo">這是測試盒子</div> </body> </html>
麻煩採納,謝謝!
2、如何讓網頁自適應所有屏幕寬度
「自適應網頁設計」到底是怎麼做到的?其實並不難。
1.首先,在網頁代碼的頭部,加入一行viewport元標簽。
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0
,即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。具體說,CSS代碼
不能指定像素寬度:width:xxx px;
只能指定百分比寬度:
width: xx%;
或者
width:auto;
3、相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。
三、流動布局(fluid grid)
「流動布局」的含義是,各個區塊的位置都是浮動的,不是固定不變的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
四、選擇載入CSS
「自適應網頁設計」的核心,就是CSS3引入的Media Query模塊。
它的意思就是,自動探測屏幕寬度,然後載入相應的CSS文件。
上面的代碼意思是,如果屏幕寬度小於400像素(max-device-width: 400px),就載入tinyScreen.css文件。
如果屏幕寬度在400像素到600像素之間,則載入smallScreen.css文件。
除了用html標簽載入CSS文件,還可以在現有CSS文件中載入。
五、CSS的@media規則
同一個CSS文件中,也可以根據不同的屏幕解析度,選擇應用不同的CSS規則。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是,如果屏幕寬度小於400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。
六、圖片的自適應(fluid image)
除了布局和文本,」自適應網頁設計」還必須實現圖片的自動縮放。
這只要一行CSS代碼:
img { max-width: 100%;}
這行代碼對於大多數嵌入網頁的視頻也有效,所以可以寫成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好寫成:
img { width: 100%; }
此外,windows平台縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});
3、如何使網頁的div元素高度滿屏
可以要配合JS
<html>4、一個瀏覽器窗口的寬度和高度的px是多少?
這個並無固定值
瀏覽器窗口是隨動的,比如顯示器大小,窗口是否全屏等,但是可以通過JavaScript相關的代碼來獲取當前瀏覽器窗口的尺寸,具體可參考JavaScript的api文檔
5、網頁設計合適的頁面尺寸是多少
網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。
6、DIV高度怎麼設置全屏?
DIV最外層全屏100%寬度
其實DIV全屏即寬度值設置為100%,如果對網頁最外層的DIV盒子不設置寬度回,這樣盒子依然是全屏相當於答100%寬度。
如果對DIV設置全屏,一般我們就設置其width寬度樣式為100%。
這里為了方便理解,DIVCSS5實例講解DIV全屏實現對最外層DIV給予id引入CSS命名為warp;同時為了便於觀察,我們對div設置一個css背景為黑色,高度為80px。
完整html+css代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>div全屏實例</title>
<style>
#warp{ width:100%;height:80px;background:#000}
</style>
</head>
<body>
<div id="warp"></div>
</body>
</html>
7、如何使網頁div元素高度滿屏
大部分瀏覽器支持CSS3的高度新單位「VH」(屏幕高度),height: 100vh;就是屏幕高度的100%,也就是高度滿屏。但是UCWeb等瀏覽器不支持該單位,實際使用要測試
height: 100vh;8、怎麼讓一個頁面高度占整個屏幕的
樣式設置高度撐滿整個頁面,那麼必須從最外層一層一層設置高度100%;代碼如下:html,body,div{
height:100%}
這里默認div是第三層,如果要撐滿全頁面的話,那麼外層必須也是高度100%;
下面舉個例子:
<html>
<head>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;}
html,body,div{
height:100%
}
</style>
<body>
<div>高度全屏</div>
</body>
</html>
9、DIV高度怎麼設置全屏?
要想對DIV設置全屏,一般設置其width寬度樣式為100%,設置其width寬度樣式為100%有兩種方案,具體方案如下。
10、如圖,頁面是滿屏的效果。如何設置第三個div的高度?
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
html, body {margin:0; padding:0}
body {display: flex; flex-direction: column; width:100%; height:100%}
.flex {flex: 1 1 auto; box-sizing: border-box; border: 1px solid #000}
.h70 {flex: 1 0 70px}
.scroll {overflow:auto}
</style>
</head>
<body>
<div class="flex h70">導航,高70px</div>
<div class="flex"><p>條件篩選,高度不固定</p><p>第二行</p><p>第三行</p></div>
<div class="flex scroll">結果,剩餘高度,自動滾動條<div style="height:1000px"></div>我是最後一行</div>
<div class="flex h70">底部,高70px</div>
</body>
</html>