I tried to replicate the react-resizable-panels example component usage by copying over the code to Codesandbox. But in the codesandbox, the content doesn't take up the whole viewport height. There's absolutely no difference in styles as far as I can tell. The body height is 100%. It seems to expand it to full-height only in the react-resizable-panels example.
Here are the two identical code examples for reference:
Original extracted: https://react-resizable-panels.surge.sh
Codesandbox clone: https://y6yhjv.csb.app
Any help with debugging the difference between the two examples would be highly appreciated.
Thanks. :)
It looks like the missing <!Doctype html> makes react-resizable-panels example revert back to 'quirks' mode and cause html and body take up 100% of the page height. Just tested with a quick code and below is the result.
See thoroughly for the structure in both and their respective computed height.
height: 100% requires a parent element to reference for height. I'm actually more surprised that the first example goes to full height.
Either way, adding height: 100vh; to your <div id="root"> element (ie. parent element) will give you full height. Optionally, you could add it to the element that's currently set to height: 100%.
Related
I don't understand why a <div> in my HTML code is being taken out of its container height computation, despite it having a non-zero height and not being absolutely positioned.
I've tried simplifying the code and reproducing the problem in a jsfiddle, but I couldn't reproduce it there, so it seems to me my only choice is to let you look at the real code.
The problem is that when you shrink the window just below 768 pixels of width (which is a breakpoint in my CSS) the <div class="vs-month-timepicker-container">, that contains the calendar and the timepicker, gets a computed height that does not include the timepicker (heck, it does not even include the full calendar), so it happens the <div class="wpv-booking-option-title wpv-booking-accommodation-title"> below it, that contains the text "Which accommodation do you want?" overlaps the calendar and the timepicker.
Can you help me understand why?
Remove the flex-wrap: wrap; of the element .wpv-calendar-wrapperand the height is okay.
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
I'm curious what is the purpose of html, body{width:100%} in the css file? Is it kind of css reset code?
Disabling this piece of code doesn't affect on what I see in the browser. Is it a "bugfix" for some old browser or for mobile devices? Am I missing something?
Could anybody please explain?
Thank you.
As far as I know, width:100% is used when you want a block-level element to fill any remaining space inside it's parent or when an element is inheriting a set width value that you want to override. But in most cases it is unnecessary or will bring undesirable results.
As far I know it's not necessary maximum time, some time not mentioning this is creates problem with IE browser by improper formatting of the content. otherwise there is no need.
Understand it this way.
HTML is parent of BODY.
BODY is parent of the content.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set.And since the content of body will probably need to change dynamically. Setting min-height of the body to 100% makes that happen.
If we are using overflow:hidden with body and the body isn't able to take the height of dynamic content then the part outside the body height won't be visible .
Now the question is
When doesn't the body take the height of the dynamic content ?
When we are using floating elements .The height of the floating elements are not calculated by the parent until we use overflow:auto.
When looking at other people's code (or many CSS resets), I see the html element addressed with basic styling (like height: 100%) and sometimes I see it ignored completely. In my experimentation there is no difference, but I am not sure if I am missing something.
In this post they give the example of
html,body{
min-height: 101%;
}
to keep scrollbars visible (but no other definitive answer). Other than a hack like this, is there any specific reason to style the html element?
Well the major reason i can think of is that, for specifying height in % the elements parent needs to have a height set explicitly.
Assume you've a container <div> which you need to be of 100% height and responsive. simply applying height:100% won't work unless you specify a height for it's parent <body>.
Hence we'll apply height:100% for the <body> - Now, this won't work since <body>'s parent doesn't have a height set explicitly - which is our <html> element.
Hence we apply
html{
height:100%;
}
...!
This is not required if your design is not responsive , i.e if you're setting fixed dimensions in pixels
This is used for making height:100% relative to the viewport height.
As I understand it, it is the html element that displays scrollbars. So if you don't want to display scrollbars at all for some reason you would need to hide overflow on that element.
More information about the html element here
I have been working on a project using Compass with the 960.gs plugin. It's worked quite well so far, giving results that look nearly identical across browsers with little effort. I've run into a small problem, however.
The div I am using as 960's main grid container has a vertically tiled background in CSS. I need this background to extend all the way to the bottom of the browser's viewport, but it would seem that 960's use of floats is somehow conflicting with this.
Despite the container's height being set to 100%, the background only extends part of the way down the screen when overflow is unspecified. Setting overflow to hidden fixes it, but hides the scrollbars!
How can this be dealt with? I've used Webkit's inspector look through the code and DOM for problems and as far as I can see there's nothing that should cause this behavior.
It's not online and the code is too large to copy and paste here, but I will recreate the structure in abbreviated psuedocode:
<html>
<head></head>
<body>
<primary background div>
<960 container div>
<header div>Stuff</div>
<main content div>More Stuff</div>
<footer div></div>
</div>
</div>
</body>
</html>
I've scanned the CSS is there is nothing problematic. I'm not floating anything and the most I'm doing is small padding and margins...
It's hard to tell without the actual code, but the prerequisite for block to stretch at 100% is one of these:
It's parent have an absolute set height (like 100px etc.).
Or all parent of this block till HTML tag must have height: 100%.
So, look at this example: http://jsfiddle.net/kizu/UvAxV/ — there on frame hover HTML and BODY get height: 100% and the wrapper stretches to 100% too.
So, in your case, you must to make sure that HTML, BODY and “primary background div” all have height: 100%