Height of sidebar 100% not working
Question
I just can't get the sidebar to work with a full height underneath the header/nav and above the footer.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="header">
<div class="row">
<div class="col-3">
<img src="img/logo.png" alt="test">
</div>
<div class="col-6">
<h1>Music</h1>
</div>
<div class="col-3">
<button>sign in</button>
<button>sign up</button>
</div>
</div><!-- end row -->
<nav>
<ul>
<li><a href="#" class="active">home</a></li>
<li><a href="#">genres</a></li>
<li><a href="#">artists</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div><!-- end header -->
</header>
<main>
<div class="row">
<div class="col-9">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
<div class="col-3 sidebar">
<p>test2</p>
</div>
</div>
</main>
<footer><p>Here comes the footer at the bottom of the page with 100% width</p></footer>
</body>
</html>
Here are my HTML and CSS. I hope someone knows what the solution is. https://codepen.io/Midoriakwa/pen/wPqzZv
1 answers
solution1
3 ACCPTED 2017-11-14 19:59:22
Your sidebar ( col-3 sidebar ) , has a parent element, classed row .
The row element has no explicit height set, so height: 100% won't work on the child element ( col-3 sidebar ).
When using height: 100% , you are saying something along the lines of:
Use 100% of the parent's height
If the parent has no height , nothing will happen.
See this question for more clarity.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.