I'm new to web development and currently working on my first website using only HTML, CSS, and JavaScript. I encountered an issue with the height of a fixed block element. When the user clicks on the "Contact us" link, a box containing contact information should open in the center of the screen. I set the position property to fixed, hoping that the height would adjust based on its content, but it's displaying as 100% of the screen height instead. The website is in Spanish, and you can access it at this link:
As I mentioned before, this is my first web page, and I'm still working on the navigation bar.
EDIT: I apologize for not providing any code initially:
div#contacts1{
font-family: "Ubuntu Medium";
padding: 3.5em;
width: 50%;
border: solid 2px;
border-radius: 20px;
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
// Add more code here
<!DOCTYPE html>
<html>
<head>
<title>Bordaos y algo mas</title>
<style type="text/css">
@import url("index.css") screen;
</style>
</head>
<body>
<div id="contacts">
</div>
<div id="contacts1">
// Add more code here
</div>