html element only taking up top half of the screen

Question

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet"> 
    <title>Idea Finder</title>
</head>
<body>
    <ul id="wordList"></ul>
    <div class="test"></div>

    <script type="module" src="index.js"></script>
</body>
</html>

js:

import { apiKey } from './apiKey.js'

const wordnikBaseUrl = 'https://api.wordnik.com/v4/words.json/randomWords?'

const fetchWordList = async () => {
    const queryStr = [
        'hasDictionaryDef=true',
        'includePartOfSpeech=verb',
        'minCorpusCount=1000',
        'limit=5'
    ].join('&')

    await fetch(`${wordnikBaseUrl}${queryStr}&api_key=${apiKey}`)
        .then(res => res.json())
        .then(json => {
            document.getElementById('wordList').innerHTML = json.map(obj => `<li>${obj.word.charAt(0).toUpperCase() + obj.word.slice(1)}</li>`).join('')
        })
};

fetchWordList()

css:

* {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro;
}

#wordList {
    position: relative;
    list-style: none;
    padding: 25px;
    width: 30%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    background: red;
}

#wordList > li {
    padding: 10px 15px;
    margin-bottom: 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
    color: darkslategray
}

.test {
    height: 100%;
    width: 100px;
    background: yellow;
}

the wordList ul stops half way down the screen even with 100% height applied. When I hover over the html/body elements, they have a dotted line exactly where wordList stops. If i apply some background color to the body, it takes up the entire screen.

I think I could fix it like this:

html, body {
    height: 100vh;
    overflow: hidden;
}

But I'd like to understand why it's happening. This is the first time I've created a project on this laptop, and it was never an issue with my desktop.

Filip Huhta · Answer 1 · 2021-04-01T18:20:40.863

To make a percentage value to work for height, the parent's height must be set. So if you add height:100%; to your parent elements html and body it will work, because your parent elements have the size 100% of the screen.

Parent elements are the elements that have elements inside of them, so in this example, the <div> is the parent to the <p> element. Hope this explains how it works for you.

<div>
<p>test</p>
</div>

* {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro;
}

html, body {
    height: 100%;
}
#wordList {
    position: relative;
    list-style: none;
    padding: 25px;
    width: 30%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    background: red;
}

#wordList > li {
    padding: 10px 15px;
    margin-bottom: 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
    color: darkslategray
}

.test {
    height: 100%;
    width: 100px;
    background: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet"> 
    <title>Idea Finder</title>
</head>
<body>
    <ul id="wordList"></ul>
    <div class="test"></div>

    <script type="module" src="index.js"></script>
</body>
</html>

html element only taking up top half of the screen

1 Answers1