HTML5相對單位

我想使用相對單位制作HTML5網站。我想用什麼？百分比？HTML5相對單位

我想要做以下事情，但我的標題不是身體的10％。至少它沒有像這樣展示。下面的CSS是main.css中包含的內容。

body{ 
 
    background-color:red; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
header{ 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    width:960px; 
 
    background-color:#000000; 
 
    height:10%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title></title> 
 
    <meta content="UTF-8"> 
 
    <link rel="stylesheet" href="stylesheets/main.css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     testing 
 
    </header> 
 
    </body> 
 
</html>

來源

2016-02-14 james0200101

閱讀此：http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work –

結論：在px中給身高，它會開始工作 –

我認爲你需要申請「高度：100％」爲「HTML」元素也以使用相對尺寸頁面的元素。

html { height: 100%; }

來源

2016-02-14 09:15:51

試試這個CSS：

html{ 
height:100%; 
min-height:100%; 
} 

body{height:100%;} 

header{height:10%; 
background:red; 
width:100%; 
margin:0 auto;}

，我建議你使用這個復位CSS：

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

reset.css源http://meyerweb.com/eric/tools/css/reset/

來源

2016-02-14 10:32:15 mohade

正如其他人所說，你需要給所有容器的父母一個高度，以便能夠使用百分比高度： html, body { height: 100%}。從現在開始，任何百分比高度都是相對於他們最接近的具有設定高度的父母。

但我只是想補充一個替代單位是vh（視口高度），它是視點高度的百分比。所以你可以用height: 10vh;替換你的height : 10%;。這當然與父容器無關，因此與%單位略有不同。

來源

2016-02-14 11:55:00