css help

Question

How can I make the block height automatically adjust to the text? I have been trying to solve this problem for 3 days now. but I can't solve it.
i need to save the property position relative at the content and absolute at the text.How to solve this problem?
Google dont have this information.

https://code.sololearn.com/W6LGUuv4JLQM/?ref=app

Answer 1

Short answer use overflow: scroll; or overflow: auto;
https://www.w3schools.com/css/css_overflow.asp

Long answer:
Relative parent need to have height, you set to 100px, but text height is much longer so it overflow.

Solution with 100% or auto on container wont work because it need to be some fixed value, not sure why.

In first code I set parent to 100vh - height of device, and set overflow to scroll, it will allow user to scroll content. This wont look nice on pc, because parent will take full height of screen, so some responsive style need to be done.
By default some browser also add scroll bar.

You can also use height with pixels, like 300px, 500px... with fixed values.

For spacing I suggest you to use padding.

https://code.sololearn.com/WwBw8xjM6F3F/?ref=app

In second code I set 100% height to child, so it will be inside parent, but text have more height so it overflow, you can add and remove overflow style to see how it works. Child have red border.
https://code.sololearn.com/Wj87I6CVVb1j/?ref=app

Answer 2

To add on my previous comment.
I know it is your task to make parent relative and child absolute, but in practice try to avoid using this to make layout of page. For layout use css flex or grid.
Here you don't need to set child any position and it will work just fine.

Best use case for position is when you need to set position of some icons, close(x) button, some intertsting image at edge of container, when you draw with css...

If you wanna practice more position, try to draw with css, in that way you will learn how to create shape, how to oriente it (rotate for example), and of course how to position. There are many tutorials on youtube about it.

Answer 3

Can you provide the exact question word for word?

Answer 4

Akeiy In the code playground we have tabs that are auto linked to the html document.
So you do not have to manually link the style sheet in the html document.

Answer 5

I believe that the answer in this can explain why it's not working:
https://stackoverflow.com/questions/17005503/behavior-of-absolutely-positioned-child-div-with-inline-block-parent-div#:~:text=When%20you%20give%20absolute%20positioning%20to%20the%20child,the%20absolutely%20positioned%20child%20div%20%28%23content%29%20to%20collapse.

If you want it to wrap around the text remove position:absolute and change the height from 100px to 100%. how to get it to include position:absolute? Idk, I'm not that farmiliar with css, hope someone else woth more experience can style it correctly.

Answer 6

Hi bud !
Hop this helps

Just add this code in JS

window.onload = () => {
document.querySelectorAll('#content').forEach((e)=>{
e.style.overflow = "auto";
e.style.height = e.scrollHeight + "px";
});
}

Example attached below

https://code.sololearn.com/WrE29fi9hlMW/?ref=app

Answer 7

table cobe

Answer 8

☺️ never lose your hope

Answer 9

First class=body

Answer 10

Bro first link Html with Css like this..
<link rel="stylesheet" href="style.css"></link>