Issue
I specified the layout of my document using percentage values. However, I'm unable to understand the behavior of my CSS. What I think I'm doing is:
- Telling the height of the
HTMLelement to always be 100vh. - Telling the height of the
bodyelement to be 100% of the html (so 100vh). - Telling my containers to be a percentage of the height of the body (so, 20%, 60%, 20%).
So, in a viewport of 1000px. My html and body elements height will be 1000px. My other containers will have a height of 200px, 600px, and 200px. With the 600px container (.songs-container) having a scroll bar when it's contents overflows.
However, this is not the behaviour I see. Because of something I don't understand, my .songs-container overflows the height of the body and no scroll bar shows up.
Why is my .songs-container not adhering to the percentage height that I have specified for it and how do I fix it?
html {
height: 100vh;
background: red;
}
body {
background: #41403e;
height: 100%;
}
.songs-container {
height: 60%;
overflow: scroll;
}
.song {
display: block;
text-decoration: none;
cursor: pointer;
color: var(--primary);
}
.current-song {
background: var(--danger-light-10);
}
.search-container {
max-height: 20%;
}
.controls-container {
max-height: 20%;
}
.submit-btn--half-block {
width: 50%;
}
.input-container--block {
width: 100%;
}
@media(min-width: 600px) {
.main {
width: 960px;
margin: 0 auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css" />
<title>Document</title>
</head>
<body>
<main class="main" data-controller="songs">
<turbo-frame id="search-and-songs">
<form class="search-container row" action="http://localhost:3000/songs" accept-charset="UTF-8" method="get">
<div class="form-group input-container--block">
<input class="input-block" placeholder="Search" type="text" name="song_title" id="song_title" />
</div>
<div class='row input-container--block'>
<input type="submit" name="commit" value="search" class="submit-btn--half-block" data-disable-with="search" />
<input type="submit" name="commit" value="clear" class="submit-btn--half-block" data-disable-with="clear" />
</div>
</form>
<div class='songs-container child-shadows child-shadows-hover'>
<a id="song_210" class="song padding-small" data-action="click->songs#play" data-href="songs/Rachana Dahal Bhumari Official Lyric Video.mp3" data-id="210">Rachana Dahal Bhumari Official Lyric Video.mp3</a>
<a id="song_211" class="song padding-small" data-action="click->songs#play" data-href="songs/The Beatles - Penny Lane.mp3" data-id="211">The Beatles - Penny Lane.mp3</a>
<a id="song_212" class="song padding-small" data-action="click->songs#play" data-href="songs/The Psychology of Self-Transformation.mp3" data-id="212">The Psychology of Self-Transformation.mp3</a>
<a id="song_213" class="song padding-small" data-action="click->songs#play" data-href="songs/Arthur Gunn - Have you ever seen the rain (Creedence Clearwater Revival).mp3" data-id="213">Arthur Gunn - Have you ever seen the rain (Creedence Clearwater Revival).mp3</a>
<a id="song_214" class="song padding-small" data-action="click->songs#play" data-href="songs/Khaabon Ke Parinday (Full video song) Zindagi Na Milegi Dobara Hrithik Roshan, Kartina Kaif.mp3" data-id="214">Khaabon Ke Parinday (Full video song) Zindagi Na Milegi Dobara Hrithik Roshan, Kartina Kaif.mp3</a>
<a id="song_215" class="song padding-small" data-action="click->songs#play" data-href="songs/Extreme - More Than Words (Lyrics Video).mp3" data-id="215">Extreme - More Than Words (Lyrics Video).mp3</a>
<a id="song_216" class="song padding-small" data-action="click->songs#play" data-href="songs/Pichle saat Dinon Mein - Rock On!! - OST.mp3" data-id="216">Pichle saat Dinon Mein - Rock On!! - OST.mp3</a>
<a id="song_217" class="song padding-small" data-action="click->songs#play" data-href="songs/Bipul Chettri Syndicate Single.mp3" data-id="217">Bipul Chettri Syndicate Single.mp3</a>
<a id="song_218" class="song padding-small" data-action="click->songs#play" data-href="songs/Why Shakespeare Because its 2016 Stephen Brown TEDxStMaryCSSchool.mp3" data-id="218">Why Shakespeare Because its 2016 Stephen Brown TEDxStMaryCSSchool.mp3</a>
<a id="song_219" class="song padding-small" data-action="click->songs#play" data-href="songs/Senator Bernie Sanders Full Address Oxford Union.mp3" data-id="219">Senator Bernie Sanders Full Address Oxford Union.mp3</a>
<a id="song_220" class="song padding-small" data-action="click->songs#play" data-href="songs/Kalo Keshma Relimai - Dinesh Dhakal | Lyrical Video.mp3" data-id="220">Kalo Keshma Relimai - Dinesh Dhakal | Lyrical Video.mp3</a>
<a id="song_221" class="song padding-small" data-action="click->songs#play" data-href="songs/A.R. Rahman - Luka Chuppi Best Audio SongRang De BasantiAamir KhanLata MangeshkarSoha.mp3" data-id="221">A.R. Rahman - Luka Chuppi Best Audio SongRang De BasantiAamir KhanLata MangeshkarSoha.mp3</a>
<a id="song_222" class="song padding-small" data-action="click->songs#play" data-href="songs/Nabin K Bhattarai Timi Hau Lakhau Ko Dhadkan Nepali Pop Song.mp3" data-id="222">Nabin K Bhattarai Timi Hau Lakhau Ko Dhadkan Nepali Pop Song.mp3</a>
<a id="song_223" class="song padding-small" data-action="click->songs#play" data-href="songs/The Beatles - While My Guitar Gently Weeps.mp3" data-id="223">The Beatles - While My Guitar Gently Weeps.mp3</a>
<a id="song_224" class="song padding-small" data-action="click->songs#play" data-href="songs/Aakhama Timilai Nabin K Bhattarai Raharai Raharma .mp3" data-id="224">Aakhama Timilai Nabin K Bhattarai Raharai Raharma .mp3</a>
<a id="song_225" class="song padding-small" data-action="click->songs#play" data-href="songs/Kadam Prateek Kuhad Lyrics.mp3" data-id="225">Kadam Prateek Kuhad Lyrics.mp3</a>
<a id="song_226" class="song padding-small" data-action="click->songs#play" data-href="songs/Ricky Gervais Out Of England 2 - The Stand Up Special (Full show in 720p with English captions) (128 kbps)(1).mp3" data-id="226">Ricky Gervais Out Of England 2 - The Stand Up Special (Full show in 720p with English captions) (128 kbps)(1).mp3</a>
<a id="song_227" class="song padding-small" data-action="click->songs#play" data-href="songs/Eagles - Hotel California.mp3" data-id="227">Eagles - Hotel California.mp3</a>
<a id="song_228" class="song padding-small" data-action="click->songs#play" data-href="songs/Nepathya Sirfula Siraima .mp3" data-id="228">Nepathya Sirfula Siraima .mp3</a>
<a id="song_229" class="song padding-small" data-action="click->songs#play" data-href="songs/Kun Faya Kun Full Video Song RockstarRanbir kapoor.mp3" data-id="229">Kun Faya Kun Full Video Song RockstarRanbir kapoor.mp3</a>
<a id="song_230" class="song padding-small" data-action="click->songs#play" data-href="songs/The Long And Winding Road -The Beatles.mp3" data-id="230">The Long And Winding Road -The Beatles.mp3</a>
<a id="song_231" class="song padding-small" data-action="click->songs#play" data-href="songs/George Carlin on Fat People.mp3" data-id="231">George Carlin on Fat People.mp3</a>
<a id="song_232" class="song padding-small" data-action="click->songs#play" data-href="songs/Iron and Wine - Boy With A Coin.mp3" data-id="232">Iron and Wine - Boy With A Coin.mp3</a>
<a id="song_233" class="song padding-small" data-action="click->songs#play" data-href="songs/Kabira Full Song Yeh Jawaani Hai Deewani Ranbir Kapoor Deepika Padukone.mp3" data-id="233">Kabira Full Song Yeh Jawaani Hai Deewani Ranbir Kapoor Deepika Padukone.mp3</a>
<a id="song_234" class="song padding-small" data-action="click->songs#play" data-href="songs/la vie en rose - edith piaf (cover).mp3" data-id="234">la vie en rose - edith piaf (cover).mp3</a>
<a id="song_235" class="song padding-small" data-action="click->songs#play" data-href="songs/Kanchhi Hey Kanchhi Kanchhi Old Nepali Movie Song.mp3" data-id="235">Kanchhi Hey Kanchhi Kanchhi Old Nepali Movie Song.mp3</a>
</div>
</turbo-frame>
<div class="controls-container padding-small">
<div id="audio-container" data-songs-target="audioContainer">
<audio data-controller="mediaplayer" controls src=""></audio>
</div>
<div>
<button class="paper-btn btn-small" data-action="click->songs#prev">Prev</button>
<button class="paper-btn btn-small" data-action="click->songs#next">Next</button>
</div>
</div>
</main>
</body>
</html>
Solution
Percentage heights always works relative to the parent. So if you miss percentage height for any one of the parent, the child element cant have a percentage height.
As per your DOM structure, you should have the below split-up for the heights.
You missed these definitions in your css.
main {
height: 100%;
}
#search-and-songs {
height: 80%;
display: block;
}
So the below code should be the way that you should implement this.
html {
height: 100vh;
background: red;
}
body {
background: #41403e;
height: 100%;
}
.songs-container {
height: 80%;
overflow: scroll;
}
.song {
display: block;
text-decoration: none;
cursor: pointer;
color: lightblue;
}
.current-song {
background: pink;
}
.search-container {
max-height: 20%;
}
.controls-container {
height: 20%;
}
.submit-btn--half-block {
width: 50%;
}
.input-container--block {
width: 100%;
}
@media (min-width: 600px) {
.main {
width: 960px;
margin: 0 auto;
}
}
main {
height: 100%;
}
#search-and-songs {
height: 80%;
display: block;
}<link
rel="stylesheet"
href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css"
/>
<main class="main" data-controller="songs">
<turbo-frame id="search-and-songs">
<form
class="search-container row"
action="http://localhost:3000/songs"
accept-charset="UTF-8"
method="get"
>
<div class="form-group input-container--block">
<input
class="input-block"
placeholder="Search"
type="text"
name="song_title"
id="song_title"
/>
</div>
<div class="row input-container--block">
<input
type="submit"
name="commit"
value="search"
class="submit-btn--half-block"
data-disable-with="search"
/>
<input
type="submit"
name="commit"
value="clear"
class="submit-btn--half-block"
data-disable-with="clear"
/>
</div>
</form>
<div class="songs-container child-shadows child-shadows-hover">
<a
id="song_210"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Rachana Dahal Bhumari Official Lyric Video.mp3"
data-id="210"
>Rachana Dahal Bhumari Official Lyric Video.mp3</a
>
<a
id="song_211"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/The Beatles - Penny Lane.mp3"
data-id="211"
>The Beatles - Penny Lane.mp3</a
>
<a
id="song_212"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/The Psychology of Self-Transformation.mp3"
data-id="212"
>The Psychology of Self-Transformation.mp3</a
>
<a
id="song_213"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Arthur Gunn - Have you ever seen the rain (Creedence Clearwater Revival).mp3"
data-id="213"
>Arthur Gunn - Have you ever seen the rain (Creedence Clearwater
Revival).mp3</a
>
<a
id="song_214"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Khaabon Ke Parinday (Full video song) Zindagi Na Milegi Dobara Hrithik Roshan, Kartina Kaif.mp3"
data-id="214"
>Khaabon Ke Parinday (Full video song) Zindagi Na Milegi Dobara
Hrithik Roshan, Kartina Kaif.mp3</a
>
<a
id="song_215"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Extreme - More Than Words (Lyrics Video).mp3"
data-id="215"
>Extreme - More Than Words (Lyrics Video).mp3</a
>
<a
id="song_216"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Pichle saat Dinon Mein - Rock On!! - OST.mp3"
data-id="216"
>Pichle saat Dinon Mein - Rock On!! - OST.mp3</a
>
<a
id="song_217"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Bipul Chettri Syndicate Single.mp3"
data-id="217"
>Bipul Chettri Syndicate Single.mp3</a
>
<a
id="song_218"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Why Shakespeare Because its 2016 Stephen Brown TEDxStMaryCSSchool.mp3"
data-id="218"
>Why Shakespeare Because its 2016 Stephen Brown
TEDxStMaryCSSchool.mp3</a
>
<a
id="song_219"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Senator Bernie Sanders Full Address Oxford Union.mp3"
data-id="219"
>Senator Bernie Sanders Full Address Oxford Union.mp3</a
>
<a
id="song_220"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Kalo Keshma Relimai - Dinesh Dhakal | Lyrical Video.mp3"
data-id="220"
>Kalo Keshma Relimai - Dinesh Dhakal | Lyrical Video.mp3</a
>
<a
id="song_221"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/A.R. Rahman - Luka Chuppi Best Audio SongRang De BasantiAamir KhanLata MangeshkarSoha.mp3"
data-id="221"
>A.R. Rahman - Luka Chuppi Best Audio SongRang De BasantiAamir
KhanLata MangeshkarSoha.mp3</a
>
<a
id="song_222"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Nabin K Bhattarai Timi Hau Lakhau Ko Dhadkan Nepali Pop Song.mp3"
data-id="222"
>Nabin K Bhattarai Timi Hau Lakhau Ko Dhadkan Nepali Pop Song.mp3</a
>
<a
id="song_223"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/The Beatles - While My Guitar Gently Weeps.mp3"
data-id="223"
>The Beatles - While My Guitar Gently Weeps.mp3</a
>
<a
id="song_224"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Aakhama Timilai Nabin K Bhattarai Raharai Raharma .mp3"
data-id="224"
>Aakhama Timilai Nabin K Bhattarai Raharai Raharma .mp3</a
>
<a
id="song_225"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Kadam Prateek Kuhad Lyrics.mp3"
data-id="225"
>Kadam Prateek Kuhad Lyrics.mp3</a
>
<a
id="song_226"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Ricky Gervais Out Of England 2 - The Stand Up Special (Full show in 720p with English captions) (128 kbps)(1).mp3"
data-id="226"
>Ricky Gervais Out Of England 2 - The Stand Up Special (Full show in
720p with English captions) (128 kbps)(1).mp3</a
>
<a
id="song_227"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Eagles - Hotel California.mp3"
data-id="227"
>Eagles - Hotel California.mp3</a
>
<a
id="song_228"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Nepathya Sirfula Siraima .mp3"
data-id="228"
>Nepathya Sirfula Siraima .mp3</a
>
<a
id="song_229"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Kun Faya Kun Full Video Song RockstarRanbir kapoor.mp3"
data-id="229"
>Kun Faya Kun Full Video Song RockstarRanbir kapoor.mp3</a
>
<a
id="song_230"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/The Long And Winding Road -The Beatles.mp3"
data-id="230"
>The Long And Winding Road -The Beatles.mp3</a
>
<a
id="song_231"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/George Carlin on Fat People.mp3"
data-id="231"
>George Carlin on Fat People.mp3</a
>
<a
id="song_232"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Iron and Wine - Boy With A Coin.mp3"
data-id="232"
>Iron and Wine - Boy With A Coin.mp3</a
>
<a
id="song_233"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Kabira Full Song Yeh Jawaani Hai Deewani Ranbir Kapoor Deepika Padukone.mp3"
data-id="233"
>Kabira Full Song Yeh Jawaani Hai Deewani Ranbir Kapoor Deepika
Padukone.mp3</a
>
<a
id="song_234"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/la vie en rose - edith piaf (cover).mp3"
data-id="234"
>la vie en rose - edith piaf (cover).mp3</a
>
<a
id="song_235"
class="song padding-small"
data-action="click->songs#play"
data-href="songs/Kanchhi Hey Kanchhi Kanchhi Old Nepali Movie Song.mp3"
data-id="235"
>Kanchhi Hey Kanchhi Kanchhi Old Nepali Movie Song.mp3</a
>
</div>
</turbo-frame>
<div class="controls-container padding-small">
<div id="audio-container" data-songs-target="audioContainer">
<audio data-controller="mediaplayer" controls src=""></audio>
</div>
<div>
<button class="paper-btn btn-small" data-action="click->songs#prev">
Prev
</button>
<button class="paper-btn btn-small" data-action="click->songs#next">
Next
</button>
</div>
</div>
</main>Answered By - Nitheesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.