CSS 100％高度不工作，但身體是100％高度？

-1

我正在使用我的新網站，並且我有4個部分的標題，導航，主要和頁腳。CSS 100％高度不工作，但身體是100％高度？

如果在垂直方向上縮小窗口，則導航欄高度將正常工作。

但是，如果你的水平側的小窗口，所以內容會下降。

我不明白爲什麼導航欄是不是100％了嗎？身體是100％，導航欄應該有相同的高度，但它不是？

我試圖100vh，但它不工作要麼，我認爲100％應該工作？

2016-11-16 Dylan

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（http://stackoverflow.com/help/mcve）顯示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

鏈接：-http：//stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height –

@Raziasultana不適合我。頁腳不在底部了。 – Dylan

讓你的<nav>的位置fixed。

用途：

nav { 
    position: fixed; 
}

相反的：

nav { 
    position: absolute; 
}

希望這有助於！

來源

2016-11-16 15:52:26

簡單，但它的作品！謝謝 – Dylan

@迪蘭它是我的榮幸！如果這真的幫助你，請接受我的答案。 –

是的只需59秒，等待 – Dylan

嘗試： -

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

來源

2016-11-16 15:55:46

這個工程，但頁腳不在底部了。但是謝謝！ – Dylan

你嘗試添加頁面包裝？像這樣

<body> 
    <div class="page-wrapper"> 
     <header></header> 
     <nav></nav> 
     <main> 
      <p>...</p> 
     </main> 
     <footer></footer> 
    </div> 
</body> 

.page-wrapper { 
    postion:relative; 
    display: block; 
    width: 100%; 
    height: 100%; 
}

來源

2016-11-16 15:57:34

至體上HTML獲取100％的高度需要有100％的高度首先，首先讓你的HTML身高100％;

html { 
     height:100%; 
}

然後身體：

body { 
height:100%; 
}

終於元素，你希望它是100％HEIGH

nav { 
height:100%; 
}

來源

2016-11-16 15:59:21

是的，HTML和身體已經100％ – Dylan

使導航position: fixed;

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; } 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: #f9f9f9; } 
 

 
body { 
 
    position: relative; } 
 

 
header { 
 
    width: 100%; 
 
    height: 55px; 
 
    background-color: #47aadd; 
 
    position: relative; 
 
    z-index: 101; } 
 

 
nav { 
 
    width: 100px; 
 
    height: 100%; 
 
    background-color: #363636; 
 
    float: left; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; } 
 

 
footer { 
 
    width: 100%; 
 
    height: 35px; 
 
    background-color: #47aadd; 
 
    float: left; 
 
    position: relative; } 
 

 
main { 
 
    max-width: calc(100% - 100px); 
 
    min-height: calc(100% - 90px); 
 
    padding: 25px; 
 
    float: right; 
 
    position: relative; 
 
    overflow:auto; 
 

 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: border-box; }

<html lang="en"><head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 

 
</head> 
 
<body> 
 
    <header></header> 
 
    <nav></nav> 
 
    <main> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo dignissim risus, at mollis dui fringilla vitae. Vestibulum cursus consectetur nunc, ut aliquam urna rutrum a. Proin sem nunc, semper a sem et, blandit commodo diam. Nam rhoncus lobortis ligula quis eleifend. Aliquam facilisis tempor lorem, nec tristique mi condimentum nec. Ut in semper odio, in fermentum nibh. Aenean feugiat massa risus, vel tempor leo feugiat non. Cras a iaculis orci. 
 

 
      Sed maximus nunc eu gravida sagittis. Ut et justo ut est aliquam posuere. Nullam nisi neque, laoreet vel velit vel, scelerisque condimentum lectus. Nam dolor nisl, consequat vitae elementum eget, eleifend quis felis. Nullam vel accumsan ex, eget elementum magna. Sed ut erat fermentum, efficitur nibh tempus, mollis nibh. Vivamus interdum nisi sem, ac sollicitudin sem faucibus eget. Nunc ut leo eget enim posuere luctus. In hac habitasse platea dictumst. Ut condimentum tincidunt lorem, eget eleifend mi malesuada eu. Nam porttitor mi a augue rutrum mattis. Sed pellentesque vitae tortor ut pulvinar. Nam eget tortor tellus. 
 

 
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tristique eros nisl, quis commodo augue gravida nec. Aenean vel ornare quam. Donec commodo purus et suscipit fringilla. Sed ultrices justo vitae lacus egestas malesuada. Vivamus ante dui, consectetur sit amet fringilla vitae, interdum dictum enim. In congue sem diam. Suspendisse eros ligula, porta vel tincidunt vitae, condimentum a nisl. Vestibulum eget tristique quam, ut mollis nisl. Integer condimentum tincidunt est, in viverra ipsum ullamcorper ut. Morbi molestie, lectus sit amet finibus varius, libero nunc vestibulum neque, id luctus sapien ante ut justo. Suspendisse nisl orci, ultrices in magna et, dictum congue nisl. In at vestibulum velit. Nulla sed diam ex. Pellentesque a posuere nibh, sit amet vulputate sem. 
 

 
      Duis id mollis est. Duis tellus odio, aliquet at nibh eu, tristique consequat nunc. Nullam consequat sapien eget odio tempor, vel sagittis turpis aliquet. Maecenas id nisl euismod, feugiat dui at, vestibulum tortor. Phasellus at sem commodo ligula semper gravida. Duis sapien orci, blandit id viverra quis, venenatis sed est. Duis urna magna, hendrerit id quam pellentesque, posuere suscipit metus. Donec laoreet commodo odio sit amet consequat. 
 

 
      Pellentesque sem dolor, fringilla ac eros nec, commodo maximus turpis. Proin posuere ut metus mollis porttitor. Pellentesque pellentesque pulvinar lobortis. Curabitur mollis dolor eu sapien ullamcorper, et tristique felis tempus. Cras vulputate neque eget tristique imperdiet. Proin lobortis luctus sem, ac ullamcorper sem eleifend nec. Aliquam vehicula ante non enim sodales, id volutpat libero dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan dolor nec felis viverra vehicula. Nam ut aliquam mauris. Maecenas vitae purus ligula.</p> 
 
    </main> 
 
    <footer></footer> 
 

 
</body></html>

來源

2016-11-16 16:01:19 jafarbtech

謝謝，但Saurav Rastogi已經給出了這個答案。 – Dylan

CSS 100％高度不工作，但身體是100％高度？

回答

相關問題