+ 4

css help

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

4th Oct 2022, 4:04 PM
Анатолий Шмель
10 Answers
+ 5
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
4th Oct 2022, 6:10 PM
PanicS - avatar
+ 3
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.
6th Oct 2022, 8:36 AM
PanicS - avatar
+ 2
Can you provide the exact question word for word?
4th Oct 2022, 6:18 PM
Chris Coder
Chris Coder - avatar
+ 1
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.
4th Oct 2022, 4:29 PM
Chris Coder
Chris Coder - avatar
+ 1
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.
4th Oct 2022, 5:04 PM
Odyel - avatar
+ 1
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
5th Oct 2022, 7:17 PM
Abdul Samad
Abdul Samad - avatar
table cobe
5th Oct 2022, 8:51 AM
రవీందర్ రెడ్డి
రవీందర్ రెడ్డి - avatar
☺️ never lose your hope
6th Oct 2022, 12:13 AM
Aman Malik
Aman Malik - avatar
First class=body
6th Oct 2022, 10:04 AM
Вова Куличенко
Вова Куличенко - avatar
- 2
Bro first link Html with Css like this.. <link rel="stylesheet" href="style.css"></link>
4th Oct 2022, 4:24 PM
Akeiy - avatar