What could be the reason for body height displaying as zero even when a non-zero value is specified?

My current code snippet is as follows:

...
<STYLE>
body{
    position: static;
    height: 95%;
    width: 95%;
    border: 2px;
    border-style: solid;
    border-radius: 5px;
    border-color: black;
    background-color: pink;
    }
<STYLE>
...
<body>
<DIV id="div_1" >
    <DIV id="div_2a" >
        </DIV>
    <DIV id="div_2b"  >
        </DIV>
</DIV>
</BODY>
...

Despite setting the height and width to 95% in the CSS, only the width appears to be working correctly. The height collapses, possibly due to the lack of content within the div elements. This behavior seems counter-intuitive. Additionally, the background color extends beyond the borders and fills the entire visible page area. I suspect that this could be caused by some default body CSS declaration. Can someone confirm this? And how can I prevent this unexpected behavior? If I modify the CSS to reference HTML instead, the border doesn't collapse, but the background color still spills outside the border. It almost feels like a bug at this point.

Answer №1

To ensure that the height of the body takes up 95% of its parent's height, you can set the height of the html tag to 100%. This way, the body will inherit the height from its parent element.

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body{
    height: 95%;
    width: 95%;
    border: 2px;
    border-style: solid;
    border-radius: 5px;
    border-color: black;
    background-color: pink;
}

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

Having trouble retrieving the value of an HTML input field using form.value in Angular 5?

I am currently working with Angular 5 Within my HTML, I am dynamically populating the value of an input field using: <input type="number" class="form-control" id="unitCost" name="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price"> ...

Unique ideas for organizing the layout and loading of content on my website

Last year, I created a fan site dedicated to a popular PC game, but now I feel like it could use some improvements. Currently, all the pages on my site share a common header and footer, with only the main content area changing from page to page. My curren ...

What is the best way to adjust the CSS of an element within the #shadow-root (open) in web development?

When dealing with a "#shadow-root (open)" element, it appears that manipulating the style using only CSS is not feasible. The shadow-root was generated by a third-party JavaScript script and displays an element as an overlay on the page that I am trying to ...

Steps to show the default value in a text box and add additional input after clicking a button

Hello there! I need help with my HTML project again. In my script, I have a button command to display input values in boxes. I want these input boxes to show default values of Model, IMEI, and Serial when no input is detected upon button click. And when ...

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

Error message: "Azure deployment encounters Vue CSS dependency missing issue"

I recently built a Vue app following this tutorial but without CRUD functionality: . The app was created using Vue CLI 4.3.1 with vue create. During local development, it runs smoothly with npm run serve and builds without any errors. Now, I'm atte ...

Update the jQuery Mobile components on the page by refreshing them after dynamically adding them using AJAX and PHP

I have developed a PHP script that dynamically renders three form elements for each entry in a database. The script generates HTML output similar to the following example: <!-- Entry 1 --> <div data-role="fieldcontain"> < ...

What is the best way to align this form perfectly in Bootstrap 4?

HTML <div class="container-fluid background"> <div class="row"> <!-- background effect --> <div id="particles-js"> <div class="login col-12"> <form class="login-form" method="post" action=""> ...

What steps can I take to address the div issue in my React application?

After implementing Browser Router, I am encountering whitespace on the left and right side of the navbar. How can I resolve this issue? Below is the code snippet: <div className="container my-3"> <BrowserRouter> ...

Automatically refresh and update HTML content

I've created a temp.php file that generates output in JSON format: [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{" ...

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

Is there a way to integrate both login and signup functionality into a single page in a Django application?

Is it possible to have both the login and sign up forms on the same page, enabling users to signup and login depending on which button was clicked? Here is an image of my registration page: enter image description here enter image description here Additio ...

php redirect back to the page upon form submission

I've designed an html form that allows users to input data, which will then be saved into a database using PHP: <form action="http://localhost/php/insert.php" method="post"> Barcode: <input type="text" name="barcode" /><br><b ...

Is there a way to send a Python list to Django?

I'm in the process of setting up a website where I can retrieve a JSON list from my PRTG. Currently, I have successfully implemented code in the console that filters out sensors with a status of DOWN. However, I am facing difficulties in posting this ...

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

Is it acceptable to utilize display:none in order to generate multiple CSS navigation bars for a responsive website?

I designed a CSS navbar that looks great on larger screens, but unfortunately it doesn't reflow well on mobile devices. One solution I thought of was to create a separate, mobile-friendly navbar and position it on top of the desktop version while hidi ...

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

<html> <script type="text/javascript"> var map = null; jQuery(function($) { L.marker([50.065407, 19.945104], {title: 'Cat'}) .bindPopup('<h3>Cat</h3> ...

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

I need to run a Selenium Code written in Java from a NAS (Network Attached Storage) or another connected machine. My goal is to create a web page with a button that, when clicked, triggers the execution of the Selenium script located on the connected mac ...

CSS Animations are effective in CodePen, but unfortunately, they do not function properly once integrated into an ASP.Net project

I created a unique design on codepen with a background animation, which functions properly there. However, when I integrate it into my ASP.Net Core project, the animation doesn't work as expected. The file references seem correct because the backgroun ...

Adjustable table region in PHP

I need help with displaying multiple results in a dynamically created table within my program. Even though I want to show around 25 records, the program cuts off after the 5th record, leaving empty space. The issue seems to be that the area does not expand ...