Height Issue
I am working on web app, and the dashboard should only cover the full viewport of 100vh and 100vw. Preventing the horizontal and vertical scroll.
HTML structure:
<div className="flex w-full max-h-screen overflow-hidden">
<Sidebar />
<div className="w-full bg-bg">
<Navbar />
<div className="flex justify-between w-full gap-4 mt-8 mb-6">
<LeftContent />
<LabelContent />
</div>
</div>
</div>
LeftContent Structure:<div className="w-full h-full">
<SwitchButton />
<ReadingAnimation reading={reading} />}
<div className="h-full mt-[1.375rem] overflow-auto bg-card" >
<pre>{Content Here}</pre>
</div>
<button>NEXT</button>
</div>
In the leftContent component, the div with pre tag, I add "full-height", and div exceeds 100vh height.
I don't want this. I want the div should cover only the available.
I tried flex-grow but that didn't work either. How to solve this?23 Replies
If you mean that everything that would cause a scrollbar to appear has to be hidden and cut off
use
body{overflow:hidden} in css
This will hide the overflow
If this is not the solution, then please provide your code in a codepen or sandbox so that we can play aorund with it and find a solution
if you want something to hide overflow, you have to use overflow:hidden
The body will make the entire page hide its overflow, so you can't scroll down ever or to the side, itll simply be cut off
If you put it on a component it should hide whatever flows over just the sameno that is not what I mean. overflow is already applied on the main tag which is working fine perfectly.
my app should not have any scroll for seeing content and scrolling. This left Content component when I add h-full this exceeds from the viewport height and that is what I dont want.
the content should not exceed from the viewport I want the this div cover the avaialble space viewport without exceeding the current viewport height
Could you provide your code in a codepen or sandbox?
I cannot see the css you are applying
If you meant to apply the css in the HTML-tags themselves
you have to use
style="" and not class
class is used to apply a style whic you define in a CSS-stylesheetI am using tailwidcss
hmm, I'm unfamiliar with tailwind, however I recommend you send your code in a codepen or sandbox so that others are able to help you out
this is reactjs with tailwindcss so the className is what basically doing the style="" thing
OK let me do that
That sounds so confusing to me, isn't that just making it extra complicated and confusing
let me share the codepen with css that will makes sense
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
100% is still they way, but always test. 100vh for mobile is bad
100vw isn't needed
Here is codepen link:
https://codepen.io/mozi47/pen/QWJPWEa
its ugly but hope this is helpful for you.
Now you see here the content exceeds the viewport. this is not what I want. I want the content section cover the available space in the given viewport
see at the end the content excceeds
and this is how i want. so it fit in the viewport
I applied the flex gro the labelContent section that only covers the available space but for leftContent it is not working
This might help I had made it for another person to help.
I would use Grid always if I want my children to fill the space
cause it just works that way default. Flex will always dense/max-content the children
Grid > flex direction column
Thank you so much let me try this
Using grid didnot solve my problem. Here is the clean design
https://codepen.io/mozi47/pen/QWJPWEa
now here if look at sidebar the white container inside the sidebar is how perfectly cover the available full height without overflowing or exceeding viewport height on the other hand the leftContent and right content section are overflow from the viewport
you might want to remove the deafult margin from the body 🙂
already applied that doesnt work
I feel like you didn't watch Kevin's video or use my example so 🤷♂️
I watched the kevin video.
where he mention about height, to use dvh or svh. but as this app is not for mobile usage. secondly I tried the gird. but that didnt work.
code updated. Now grid applied. still same issue.
solved thanks everyone