I assumed until now that by default, according to the normal layout behavior, the <body> element filled up 100% of the height of the container <html> element even when position: static was set.
However, a simple experiment proved my assumption wrong and I was shocked.
I do understand that in the normal layout behavior, block elements' heights are elastic and stretch to fill their entire contents. However, for some reason, I thought this did not apply to the <body> element.
So, in my simple experiment, I have the following HTML:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}
<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>
If I leave the position: absolute; commented as it is just now, then by default, in the static layout, the body behaves just like any other block element and is only as tall to fill up its contents, ignoring the rules height: 100%; and min-height: 100%. It looks like the picture below.
If, however, I change the positioning to absolute, i.e. if I uncomment the following:
position: absolute;
left: 22%;
Then of course, it obeys the height: 100%; min-height: 100% rules. It then fills up the entire height of the browser like so:
Is this the normal behavior? Does the <body> element behave just like any other block element with respect to its layout rules, esp. with respect to its height?
TL;DR: Yes, this is the normal behaviour.
However.
Once upon a time, there was an older standard where body did have the height of the viewport by default. Long ago.
Also, some obscure features of HTML may confuse matters. If you do not set the background-color property of the html element, the background of body will be "inherited" by html, so that the whole window has this background, making it look as if the body takes up the whole window, which isn't the case!
When it's static it has a parent which is html and when you use static positioning in that case it thinks within the parent. html by default as any other block has height: auto so if you change that to 100% it becomes as you expected.
body has a parent html and build its sizes according to its parent.
I'm stuck with displaying a React component named "home" that take 100% of the height of my screen.
Whatever I use CSS or React inline style it doesn't work.
In the example below, html, body and #app are set to height: 100% in CSS. For .home I used inline style (but whatever I used CSS or inline style is the same):
The issue seems to come from <div data-reactroot data-reactid='1'> that is not set with height: 100%.
If I hacked it with Chrome developer tool, it's work:
So what is the proper way to display a full height component in React ?
Any help is welcome :)
html, body, #app, #app>div {
height: 100%
}
This will ensure all the chain to be height: 100%
You could also do:
body > #root > div {
height: 100vh;
}
try <div style = {{height:"100vh"}}> </div>
It annoys me for days. And finally I make use of the CSS property selector to solve it.
[data-reactroot]
{height: 100% !important; }
Despite using of React here - elements layout is completely html/css feature.
The root cause of the issue is in how height property in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.
So if you have a structure like html > body > div#root > div.app - to make div.app 100% height all its ancestors should have 100% height. You may play with next example:
html {
height: 100%;
}
body {
height: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
background-color: indigo;
padding: 0 30px;
}
div.app {
height: 100%;
background-color: cornsilk;
}
<div id="root">
<div class="app"> I will be 100% height if my parents are </div>
</div>
Few arguments:
Usage of !important - despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem.
Why not position: absolute. Property positon is designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despite position: absolute; top: 0; right: 0; bottom: 0; left: 0; will result in the same look - it also pushes you to change parents position to something not static - so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.
I managed this with a css class in my app.css
.fill-window {
height: 100%;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}
Apply it to your root element in your render() method
render() {
return ( <div className="fill-window">{content}</div> );
}
Or inline
render() {
return (
<div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
{content}
</div>
);
}
#app {
height: 100%;
min-height: 100vh;
}
Always full height of view min
While this may not be the ideal answer but try this:
style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}
It keeps the size attached to borders which is not what you want but gives you somewhat same effect.
body{
height:100%
}
#app div{
height:100%
}
this works for me..
<div style={{ height: "100vh", background: "#2d405f" }}>
<Component 1 />
<Component 2 />
</div>
Create a div with full screen with background color #2d405f
I had the same issue displaying my side navigation panel height to 100%.
My steps to fix it was to:
In the index.css file ------
.html {
height: 100%;
}
.body {
height:100%;
}
In the sidePanel.css (this was giving me issues):
.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}
Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.
I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!
For a project using CRNA i use this
in index.css
html, body, #root {
height: 100%;
}
and then in my App.css i use this
.App {
height: 100%;
}
and also set height to 100% for a div within App if there is one eg-
.MainGridContainer {
display: grid;
width: 100%;
height:100%;
grid-template-columns: 1fr 3fr;
grid-template-rows: 50px auto;
}
Try it to solve your problem
<div style = {{height:"100vh"}}> </div>
Adding this in the index.html head worked for me:
<style>
html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>
I had trouble until i used the inspector and realized react puts everything inside a div with id='root' granting that 100% height along with body and html worked for me.
CRA has a #root div to which we render our react app, so it should also be considered a parent div and give appropriate height according to your need. This answer is based on my experience with a similar situation and giving 100% height to #root helped me fix the height issue with one of it's child element.
This depends on the layout of your app, in my case the child was not able to takeup the given height because #root(parent) div had no specified height
Funny how this works since I thought html was the one with not full height, turns out it was the body.
Just add the below css in index.css:
body{
height: 100%;
}
There is an existing body tag? Add it in there!
I'm currently trouble shooting in NextJS 13 & Tailwind to achieve this.
There's an additional layer of < div>'s that I'm unable to locate generated from Next's new AppDir.
One way to trouble shoot that nobody mentioned, which is easy to overlook is:
Open your Web Dev Tools and modify each ancestor to height:100% or in Tailwind 'h-full' and you'll save time to see if height full is the appropriate solution for your use case. I was quickly able to find out my footer component overlaps my div with this method instead of wasting time.
Edit: Reason for Next 13 user https://github.com/vercel/next.js/issues/42345
try using !important in height. It is probably because of some other style affecting your html body.
{ height : 100% !important; }
also you can give values in VP which will set height to viee port pixel you mention likeheight : 700vp; but this wont be portable.
this is all over the stackoverflow,but it doesn't work for me.
using twitter bootstrap 3, i need to set the jumbotron class div to full display height.
this is my test site:
http://test.ulkas.eu/
i read i shall include
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 50px;
}
but it still doesn't work. maybe i got some syntax error somewhere?
In order to apply 100% height property to inner divisions you need to mention the same property to all the parent divs. So add
body{height: 100%;min-height:100%;padding-top:50px;}
.jumbotron{height:100%;}
to your body as well as to jumbortron class
The height of your html / body will always only be the height of your content - those tags behave slightly different to standard div / block tags. To get something to be truly 100% high your best bet is to remove it from the standard flow of the page using position: absolute / fixed, then set your div to be 100% high. Something like this:
.fullheight {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
I think it's always worth setting a z-index on anything I position outside the normal page flow, allows you to control which parts appear on top of others.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
Is there anyway to make a a child element 100% width of the screen while it's parent is only 50%?
For example, I need to make the black footer for this site extend the full width of the screen while maintaining the integrity of the rest of the site. msdnw.com/
I created my custom div of #blackback and have tried various ways to make it work and just can't. Any ideas? P.S. Yes I've already tried placing the div below the footer code as apposed to wrapping the footer. But perhaps the code I was using was not working how I needed.
Thanks for any help :)
Update your #blackback css to:
#blackback {
width: 100%;
height: 300px;
background-color: #000;
position: absolute;
left: 0;
}
should do it.
You want to go and use Absolute positioning:
.child {
left: 0;
right: 0;
position: absolute;
}
hope that helps