What is the reason behind body, html, and #black sizing to the size of the viewport rather than the document height?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body{
height:100%;
}
#black{
position:absolute;
width:100%;
min-height:100%;
height:100%;
background-color:#000000;
z-index:1000;
}
#shell{
height:962px;
width:972px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="black"></div>
<div id="shell">
</div>
</body>
</html>
To ensure that your body and html tags maintain a height of 100% relative to the viewport, you should apply min-height. This way, #black will also inherit this height:
html, body{
min-height:100%;
}
UPDATE:
In addition, don't forget to include this line of code:
body {
position: relative;
}
Here is a suggestion for your code:
body, html {
padding: 0;
margin: 0;
}
UPDATE:
#black {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%:
}
Simply put, because that's how it works. When you specify
#black {
position: absolute;
width: 100%;
height: 100%;
}
it indeed sets the width and height to 100% of the size of the containing block, which in this scenario happens to be the viewport.
If your intention is for #black to cover the entire content, you'll need to assign it a different containing block by adjusting its positioning relative to body.
body {
position: relative;
}
Now it covers the full height. To achieve the same for the width, you have the option of setting a specific width on the body element as follows:
body {
position: relative;
width: 972px;
}
Alternatively, you could float the body element:
body {
position: relative;
float: left;
}
To explore this further, refer to the complete example on JSFiddle
I'm currently working on a JavaScript code for my task manager website. Each page has its own JS file, but I've noticed that the data saved in one file seems to leak over to the others. How can I contain these variables so that tasks don't s ...
I'm attempting to create a social media button using an anchor tag and a fontawesome icon. My goal is to have the entire background colored black with CSS, but my previous attempts only resulted in the bottom half turning black. https://i.sstatic.net ...
I have a complex list structure: <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li> <ul> <li>Nested Item</li> <li>Nested Item</li> <li>L ...
I need help configuring a link so that when the user clicks "download here," a PDF file is automatically downloaded to their desktop. Can someone provide guidance on how to achieve this? ...
Currently, I am delving into the realm of popular CSS frameworks such as Bootstrap and Foundation. While studying them, I have identified aspects that I believe could be enhanced and customized to suit my own projects or potentially for free distribution i ...
In the midst of developing a website for a client in Brazil, there is a section on the site dedicated to displaying feedback and reviews from users. For instance: Expected Version: "Três aprovados em menos de dois minutos!" However, when it appears to ...
I'm struggling to get the color boxes to display horizontally with spaces between them. Currently, they are showing up vertically in a column layout. I want 4 smaller color boxes within a larger grey box at the top layer, with margins and padding app ...
this section contains a group of radio buttons <input type="radio" name="image" id="100" value="a"/> <input type="radio" name="image" id="100" value="b"/> <input type="radio" name="image" id="100" value="c"/> <input type="radio" name ...
<script src="https://cdn.tailwindcss.com"></script> <div class="h-screen grid grid-rows-[auto,1fr]"> <div class="bg-slate-300 h-24 flex items-center px-4"> <h1 class="text-3xl">Navbar</h1> </div> <div ...
https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
Is there a way to retrieve only the most recent row from each category in the database? Example Database: Table name: Colors id category timestamp 1 yellow 14/2/2014 2 blue 13/2/2014 3 red 14/2/2014 4 yellow 13/2/2014 5 blue 11/2/2014 ...
I have implemented a fixed positioning for the table headers using the following code: onScroll={() => { document.querySelector('thead').style.transform = `translate(0,${this.scrollRef.scrollTop}px)`; }} However, when I scroll the ta ...
Currently, I am developing a PHP web application for restaurant management. One of the key features I am working on is creating a floor plan layout of tables. This will allow the admin to easily drag and drop tables from the left side onto the canvas wher ...
Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...
I'm currently facing an issue with echoing a password hash from my login form. The error message **Undefined index: signinbtn in D:\XAMPP\htdocs\login_page.php ** keeps appearing, and I can't figure out why. I have set up the form ...
Could you please help me identify the issue with the navigation on this website? It seems to work correctly on webkit, but not on firefox! Intended vs actual ...
Can someone confirm if it is true that when using https, URLs should begin with //[your-domain]/? A friend using WordPress mentioned this but I haven't been able to find specific information on the topic. ...
I'm currently working on a code block that resembles the following: <p class="cont"> <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a> </p> Additionally, I have some CSS sty ...
I am having an issue where elements I want to drag on a canvas are not appearing next to each other as expected. Instead, they are overlapping: To make these elements draggable, I am utilizing the dragElement(element) function from https://www.w3schools.c ...
Currently, I am immersing myself in the world of AJAX by tapping into online resources and delving into some informative books. While doing so, I discovered that AJAX is not exactly a groundbreaking technology in and of itself, but rather a method of lever ...