blank web map results page - no code error

I'm doing the leaflet step by step for webmap with javascript, html and css. The internet page is blank when I run the code, but the script doesn't show an error. Please, help

<!DOCTYPE html>
<html lang="pt-br">
<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">
    <title>Tutorial youtube</title>
    
    <!-- leaflet css--> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #map{
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
        <div id="map"></div>
</body>
</html>

<!--leafleat js-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

<script>

//inicialização do mapa
var map = L.map('map').setView([-14.23,-51.92], 4);

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);

</script>

Solution

You need to set a non-zero height on the map div.
height: 100% results in a 0px height for your map div.

One of these rules will work.

height: 100vh;
height: 400px;
height: 50rem;