What causes the test div's height to increase when using position:absolute?

The div.test was initially set with a height of auto, meaning no fixed height.

.test {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: yellow;
  width: 200px;
  height: auto;
  padding: 10px;
}
<div class="test">
  This is some test information for my div.
</div>

By adding position:absolute; in the CSS, all other style attributes remain the same.

.test {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: yellow;
  width: 200px;
  height: auto;
  padding: 10px;
  position: absolute;
}
<div class="test">
  This is some test information for my div.
</div>

After adding the position property, the height of div.test appears to have increased. Why is this happening?

htmlcss

Answer №1

When the position of the div is set to static in your initial scenario, the top/right/bottom/left properties do not have any effect. However, by changing the position to absolute, these properties come into play. The bottom property, in particular, is what causes the div to expand. Removing bottom: 0; from your code will result in the div collapsing back to the height of its content:

.test { 
    top: 0;
    right: 0;
    left: 0;
    background: yellow;
    width: 200px;
    height: auto;
    padding: 10px;
    position: absolute;
}
<div class="test">it is a test info for my div.</div>

Answer №2

Consider applying the max-height: property to prevent it from expanding beyond your desired size.

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

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

javascriptjqueryhtmlcss

The outcomes of using Wget versus Python requests may vary

I have been attempting to extract transaction records from the following website: . While researching on stack overflow, I came across a possible solution that involves using urllib.request and selenium.webdriver to retrieve and render a webpage. Here&ap ...

htmlselenium-webdriverweb-crawlerwget

Image tag src displaying a React icon causes a malfunction

I am currently following a guide on ReactJS and encountered an error when trying to use an Img tag as directed in the tutorial. <Img src={keepLogo} alt="Google keep logo" /> This resulted in the following error: Warning: Invalid value for ...

htmlreactjsreact-icons

What is the best way to modify a Bootstrap class' SASS attribute within a React component?

Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...

htmlcssreactjssass

Provide a value for a secondary select option parameter

I need to retrieve the university ID for use in another select option, which will display my college list under a specific university from a MySQL database. However, I am struggling to find the right approach. I want to pass fetch.university_id as a parame ...

htmlmysqlangularjsservletsionic-framework

Maintaining photo proportions in HTML when using width and height as percentages

Is it possible to specify width and height as percentages in the <img> attributes? It seems that when I attempt to do so, the image resizes but the quality appears skewed. Here is an example of my markup with fixed attributes: <img src="#" widt ...

htmlimageimage-size

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

Disable the click event using jQuery

$("button").click(function (){ $("<button>Start</button>).appendTo('main'); }); The code above introduces a functionality where clicking a button generates another button dynamically. However, each subsequent click kee ...

javascripthtmljqueryclick

Customizing the scrollbar within a modal using reactjs-popup

I am currently working on a CustomPopup functional component that includes a reactjs-popup: function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested> {item === "howto ...

cssreactjsgoogle-chromestylesscrollbar

Horizontal centering using Bootstrap 4 media

How can I horizontally center a media element? Here is the code for my media: <div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="media"> ...

htmlcssbootstrap-4

Creating flexbox items with equal height

I have a flexbox parent with flex-direction set to row. Within this parent, I have two children that I want to have the same height! Both of these children contain dynamic content with varying heights. The issue I'm facing is that when I add text t ...

cssflexbox

What is the best way to include a .AVI file in an HTML document?

I have come across some examples of .AVI in HTML on the internet. However, my page seems to be having issues. It displays fine in Chrome on my computer. But in Internet Explorer, there is a bar at the top and the videos appear blank afterwards. It ...

htmlavi

Text positioned beneath a toggle switch in html that overlaps

Is there a way to fix the issue of the label on the left side overlapping below the selector switch on my website? I want to ensure that both labels are perfectly distributed on each side of the switch. Here is the code snippet: <div class="ro ...

htmlbootstrap-4

Is it possible to customize the Angular Kendo Grid to be non-scrollable and automatically adjust its height to fit the row contents?

I'm trying to create a Kendo Grid in Angular that is Non-Scrollable and adjusts its height to fit the row contents. However, my current implementation is not working as expected, as it still gives me a fixed height. <kendo-grid [data]="propertyVie ...

cssangularkendo-uitelerikangular8

Display a "Loading" image in the gallery before anything else loads

Can a animated loading gif be implemented to load before the gallery images, or would it serve no purpose? The image will be loaded as a background using CSS. <link rel="stylesheet" href="loading.gif" /> Appreciate your help! ...

javascriptjqueryhtmlcss

Graphing functions with three.js

Is it possible to create a function grapher using the three.js API to plot a function in the form of z=f(x,y)? The program should: Generate input values between -1 and 1 in increments of .1, and use these values to plot x, y, and z vertices as part of a ...

javascripthtmlcssthree.js

Using PHP to substitute a particular HTML tag with new content

Here is an example of HTML code: <div> <h1>Header</h1> <code><p>First code</p></code> <p>Next example</p> <code><b>Second example</b></code> </div> I am tryin ...

phphtmldomdocument

What is the quickest way to change an HTML element as soon as it finishes loading?

Is there a way to modify an element as soon as it is created, without relying on the $(document).ready() function which can be inefficient when a page fails to load completely or loads slowly? Some delay is acceptable, but not if it takes multiple seconds ...

javascriptjqueryhtmlfirefoxgreasemonkey

Position the text in the center of a graph within a grid cell by utilizing dash and plotly

Is there a way to center text over a graph within a cell of a grid table using dash and plotly? I'm struggling with the alignment currently, as the graph is not centered while the text appears centered in the view but not in the cell itself. You can ...

pythoncssgridplotly-dash

What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please? https://i.stack.imgur.com/xOHVX.jpg This is what I have attempted so far: Below is my CSS code: .line-lg{ width:120%; text-align: center; border-bot ...

htmlcss