The body background color does not expand to cover the entire screen

Looking to add some color to my front page, I included these lines in the body section:

    <head>
<title>Speed_Test_Teleport</title>
</head>
<body style="height:100% ;margin:0 ;padding:0 ;background-color:#C6E2FF;">
<img src="GE_Logo3.png" style="width=350px; height=80px;">
<h1>SpeedTest to:</h1>
<div style="width: 100%; height: 24vh; text-align: center ; color:#8B0000 ; display:inline-block;">
<div style="width: 100%; height: 15px; text-align: center; font-family: palatino ;display: inline-block;"><font size="+3"><b>Teleport,Country </b></font>
 

However, I noticed that the background color only covers 60% of the screen, leaving white at the bottom:

https://i.sstatic.net/55vkT.jpg

Despite setting the height, margin, and padding correctly, there seems to be an issue with the background color not filling the entire screen.

Any suggestions on what might be causing this discrepancy?

If you need more information, feel free to view the full code at index.html:

https://github.com/olg33/ST/blob/master/index.html

Answer №1

Consider setting the body height to 100vh instead of using 100%.

<body style="height:100vh;margin:0;padding:0;background-color:#C6E2FF;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simple guide to identifying when the content of a dropdown option changes using jQuery

I am seeking a solution for detecting changes in the options of a dropdown field that are updated dynamically. Is there a method to capture an event each time the set of options within the dropdown is modified? I am not looking to track individual option ...

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

The utilization of the Open Sans font family results in certain alterations to the user

Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...

Change the `display: none` of elements back to their original value

Explanation In my coding practice, I have implemented a script that hides certain elements if the user lacks the necessary permission to interact with them. To achieve this, I utilize the CSS property display: none. However, when it comes time to reveal ...

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

Row Carousel Share - Horizontal Perspective

Having some trouble getting my carousel to align horizontally with other text in a row – it keeps taking up the full width instead of the 40% I've set. Below, you'll find the code snippet and screenshots for reference. In the screenshot above ...

The autocomplete feature is enabled for input using a mouse

I have a situation where I am using mouseleave handler to trigger Angular input errors when the mouse leaves the input field. Everything works perfectly in this scenario - the errors are highlighted as intended. However, I encounter an issue with the autoc ...

Seeking guidance on how to perfectly align my collapsible navigation bar for a university assignment

Currently, I am tackling a project for my college course, and the navigation bar is posing some challenges. Despite conducting various research attempts to resolve the issue, the site remains quite basic as it stands as just a template. Primarily, my objec ...

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

Toggle button to reveal or conceal the highlighted URL positioned directly beneath it

Recently, I've been on the hunt for a button that has an interesting functionality: when clicked, it displays a highlighted URL below or beside it. And then, with another click, hides it again. I have a faint memory of encountering such a button in th ...

Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...

Issues with CSS modules in React version 16.6.0 causing functionality to fail

I recently attempted to implement CSS Modules in my React project. Below is a snippet of code from my App.js file: import React from 'react'; import styles from './index.css' const App = () => { const REACT_VERSION = React.ver ...

Identify which browsers are compatible with HTML5 video autoplay detection

Having completed several projects with video backgrounds that autoplay when the page loads, I have encountered issues with mobile browsers not supporting the autoplay attribute on HTML5 videos. In these cases, an image is loaded instead of the video. To d ...

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

Nested floating elements

Consider the layout below <div style='float: left;'>Outer Div </div> <div style='float: left;'> <div style='float: left;'>Inner Div </div> <div style='float: left;'>Inne ...

Utilize the Tab feature effectively in Impress.Js

Currently, I have disabled the Tab key in Impress.js so that it only moves to the next slide. However, when I try to focus on links and delete this code to let it behave normally, Impress.js crashes. Has anyone found a workaround for this issue? Appreciat ...

What is the process for altering the active color of a materialize icon?

Currently working on a web application for my school project and incorporating the Materialize framework. However, I'm having trouble modifying the default teal color of the active icon. https://i.sstatic.net/9eEfM.jpg ...

Tips on how to ensure a JAVA application opens a webpage in a designated browser

Adding the microsoft-edge prefix to a URL (microsoft-edge:) will open the page in Edge, regardless of the browser being used for running the app. I am wondering if there is an equivalent prefix for Chrome and Firefox? Thank you in advance. ...

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...