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.
Related
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 using laravel 5.5 and need a footer to be at the bottom of every page.
Currently I have the footer in app.blade.php along with a nav bar and the content coming from other .blade files using yields #yield('content')
the app.blade file has
html, body {
height: 100%;
}
and the footer is
footer {
position: static;
bottom: 0px;
}
When inspecting the page the html and body are 100% height but the footer is just hanging out with the content and not shifting to the bottom of the page.
Are there any larvel related styles that could be interfering with the positioning?
I don't think laravel styling has anything to do with the problem. Setting the positionproperty to static isn't going to give you the results you're looking for, as static is the default position value for almost every html element. You could set it to absolute, fixed or sticky and depending on your choice you might need to set the bottom property on your footer to 0px.
This CSS-Tricks article should give you a better idea of how you want to implement the position and bottom properties on your footer.
Here's an implementation using the fixed value on the footer and a relative value on the body element.
You can also view this codeply project and experiment with changing the footer's position value.
html, body {
height: 100%;
background-color: red;
position: relative;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: green;
}
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.
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
Can this be done?
EDIT
Okay so clearly my original question was extremely confusing. Here is a picture;
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
The easiest way is simply using CSS:
height: 100vh;
Where 'vh' stands as vertical height of the browser window.
Responsive to resizing of brower and mobile devices.
Give body,HTML & main DIV height 100%. write like this:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
The answer from #sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
Normally, I need the same structure as you design:
1. the content should stay inside the container without overflow scroll, and
2. the container should resize as 100% while the browser is resizing.
So the basic way of doing it is:
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
html, body {
width: 100%;
height: 100%;
}
NOTE: there could a margin/padding issue for some browser (as user agent stylesheet):
which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}
<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>
Add overflow:auto to the wrapper element.
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.