gpt4 book ai didi

javascript - 侧边栏高度 100% 不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 22:34:08 24 4
gpt4 key购买 nike

我无法让侧边栏在页眉/导航下方和页脚上方的完整高度下工作。

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

这是我的 HTML 和 CSS。我希望有人知道解决方案是什么。 https://codepen.io/Midoriakwa/pen/wPqzZv

最佳答案

你的侧边栏 (col-3 sidebar) 有一个父元素,分类为 row

row 元素没有显式设置 height,因此 height: 100% 不会作用于子元素( col-3 侧边栏).

当使用 height: 100% 时,您的意思是:

Use 100% of the parent's height

如果父级没有height,则什么也不会发生。

参见 this question为了更清楚。

关于javascript - 侧边栏高度 100% 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47294148/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com