私は私の新しいサイトに取り組んでおり、ヘッダー、ナビゲーション、メインとフッターの4つのセクションがあります。CSSの高さは100％ではありませんが、本体の高さは100％ですか？
ウィンドウを縦に小さくすると、ナビバーの高さが上手く機能します。
しかし、あなたは、水平側の窓を小さくするので、内容がダウンした場合。
ナビゲーションバーはもう100％ではない理由を私は理解していませんか？ボディは100％で、navbarは同じ高さでなければなりませんが、そうではありませんか？ 
私は100VHしようとしたが、それはどちらか動作していないと私は100％動作するはずだと思いますか？
それを試してみてください -
html {
height: 100%;
}
body {
min-height: 100%;
}
これは動作しますが、フッターはもう一番下にありません。しかし、ありがとう！ – Dylan
は、ページ・ラッパーを追加しようとしていますか？ボディHTML上の100％の高さを取得するには、この
<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%;
}
のようなもの最初の100％の高さを持っている必要があり、 まずHTMLの高さを100％にします。
html {
height:100%;
}
その後ボディ：
body {
height:100%;
}
ついにあなたはそれが100％のheigh
nav {
height:100%;
}
はい、htmlとbodyはすでに100％ – Dylan
になりたい要素がNAV 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>ありがとうございます。しかし、Saurav Rastogiはすでにこの回答を出しました。 – Dylan
ここに意味のあるコードと問題の説明を追加してください。修復が必要なサイト にリンクしないでください。そうしないと、 問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例（MCVE）]を投稿すると（）、より良い回答を得るのに役立ちます（http://stackoverflow.com/help/mcve）。詳細については、 [私のWebサイトの何かが動作しません。リンクを貼り付けることはできますか？]（http://meta.stackexchange.com/questions/125997/） ありがとう！ – j08691
リンク：-http：//stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height –
@Raziasultanaは私のためには機能しません。フッタはもはや底にはありません。 – Dylan