Question

我有一个div，我希望它相对于视口或父容器或其他任何高度。它在标记的底部称为div#blockUberCookie。

我该怎么做？

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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>

为什么百分比高度不起作用？

1 个答案: