为什么div高度百分比无效？

Question

我有一个div ，我想相对于视口或父容器或其他任何东西具有一个高度。 标记底部的名称为div#blockUberCookie 。

我怎样才能做到这一点？

 html, body { height: 100%; position: relative; } * { padding: 0; margin: 0; } /* Compiled with Sass */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); /* font weights: 300, 400, 600 */ html { background: white; } h3 { font-family: 'Open Sans', sans-serif; font-weight: 300; color: grey; display: block; } nav { width: 100%; height: 100%; position: relative; } #wrapper { width: 95%; margin: 0 auto; position: relative; overflow: hidden; } #logoSloganLanding { display: block; max-width: 270px; width: 25%; margin: 0 auto 0 auto; } #contLogoSlogan { background: white; } #logoCookieLanding { display: block; max-width: 270px; width: 27%; margin: 0 auto 0 auto; } #contLogoCookieLanding { padding-bottom: 2%; background: #ececec; } #blockUberCookie { background: #45b38e; width: 25%; height: 100%; position: relative; } #blockUberCookie h3 { color: white; } #blockUberCookie h3 span { font-weight: 600; } 

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>cookie</title> <link href="_css/normalise.css" rel="stylesheet" type="text/css"> <link href="_css/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <div id="contLogoSlogan"> <img src="_images/logoSlogan.png" id="logoSloganLanding" alt="cookie"/> </div> <div id="contLogoCookieLanding"> <img src="_images/logoCookie.png" id="logoCookieLanding" alt="cookie"/> </div> <header> <nav> <div id="blockUberCookie"> <h3>about <span>cookie</span></h3> </div> </nav> </div> </body> 

Answer 1

您只需要设置它。

#wrapper {
    height: 100%;
}

还有一个标记错误，第二个<header>应该是</header> 。

 html, body { height: 100%; position: relative; } * { padding: 0; margin: 0; } /* Compiled with Sass */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); /* font weights: 300, 400, 600 */ html { background: white; } h3 { font-family: 'Open Sans', sans-serif; font-weight: 300; color: grey; display: block; } nav { width: 100%; height: 100%; position: relative; } #wrapper { width: 95%; margin: 0 auto; position: relative; overflow: hidden; height: 100%; } #logoSloganLanding { display: block; max-width: 270px; width: 25%; margin: 0 auto 0 auto; } #contLogoSlogan { background: white; } #logoCookieLanding { display: block; max-width: 270px; width: 27%; margin: 0 auto 0 auto; } #contLogoCookieLanding { padding-bottom: 2%; background: #ececec; } #blockUberCookie { background: #45b38e; width: 25%; height: 100%; position: relative; } #blockUberCookie h3 { color: white; } #blockUberCookie h3 span { font-weight: 600; } 

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>cookie</title> <link href="_css/normalise.css" rel="stylesheet" type="text/css"> <link href="_css/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <div id="contLogoSlogan"> <img src="_images/logoSlogan.png" id="logoSloganLanding" alt="cookie" /> </div> <div id="contLogoCookieLanding"> <img src="_images/logoCookie.png" id="logoCookieLanding" alt="cookie" /> </div> </header> <nav> <div id="blockUberCookie"> <h3>about <span>cookie</span></h3> </div> </nav> </div> </body>