Here in this css file I used "background image url" in body and then used another "background image url" in another class named container. But here in .container class I'm facing problem with height attribute. If I use a definite parameter in height like height:500px; then my both two background image (body and container class) is being rendered perfectly.
body{
background: url('../images/body-bg.gif') 50% 0;
font:12px/18px arial;
color: #717171;
margin:0;
padding: 0;
position: relative;
}
.container{
background: url('../images/main-bg.jpg');
width: 100%;
height: 500px;
}
But If I use height:80%/100%..etc or use min-height:80%/100%..etc then only my body background image is shown on the display. In this type of stage how can I solve my problem.
.container{
background-image: url('../images/main-bg.jpg');
width: 100%;
height: 80%;
}
or-
.container{
background-image: url('../images/main-bg.jpg');
width: 100%;
min-height: 100%;
}
Note: Basically I was doing this code from a video and in that video both two images rendered perfectly. And here are no issue with syntax or destination path.
You can't set height of a div in percentage without a valid positioning. Either assign it a position or use height in vh instead of %.
Do note that vh will give you the height of viewport but % will give the height of parent.
If you're assigning absolute position, don't forget to apply relative positioning to it's parent.
The problem is you're telling you container to have height 100% but compared to what? To make relative units work for height the parent needs to have a height defined.
You can use flex-grow as a workaround.
body {
min-height: 100vh;
display: flex;
}
.container {
flex-grow: 1;
}
Related
Here is a codepen with the general problem:
https://codepen.io/tgreen/pen/PJbPEB
.canvas {
padding: 40px;
max-width: 1170px;
width: 100%;
align-self: center;
min-height: 100%;
background: white;
display: flex;
justify-content: center;
}
I want the canvas to start at a minimum height of 100% so it fills the whole browser window, but if its content grows larger than that it should also grow to contain that. Basically I want that white box to reach the bottom at all times.
Thanks.
Switch the percentage values to vh based values,
Here is a working demo
This is because percentage values are relative to parent container, and what you are trying to achieve is relative to viewport size (you can simply replace the height: 100% of the html, body attributes by a min-height: 100%, but the canevas won't take 100% of the page if the red box is small, it will just adapt to it.
just simply remove height property from body, html
body, html {
margin: 0;
padding: 0;
/*height: 100%;*/
}
I am having some trouble understanding why my relative div (.wrap) will not display its css defined background color or image. The body has its own background with the .wrap creating a new one for the div and its contents. (.local is the absolute div I am trying to have .wrap create a background for, as it is one of the many divs I need to have a single shared background from .wrap)
Any help will be greatly appriciated!
CSS
body{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
.wrap {
position: relative;
height: 100%;
width: 70%;
background-color: white;
left: 15%;
}
.local {
position: absolute;
height: 40%;
width: 20%;
}
HTML
<!-- MAIN BODY -->
<div class="wrap">
<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST PARAGRAPH TO SHOW THE RELATIVE DIV ISSUE</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>
</div>
When you absolutely position .local, it takes it out of the flow. With it out of the flow, there is nothing inside .wrap so it collapses to a height of 0. Since .wrap has a height of 0, and .local is out of the flow, body has nothing inside it, so it too collapses to a height of 0.
Using a percentage sets the height of the element to be a percentage of its containing element. If everything is collapsed, there is nothing to be a percentage of.
If you want body to occupy the height of the whole screen, perhaps consider using the vh value which is calculated based on the viewport height.
I beleive updating your body style to:
body{
height: 100vh;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
will give you the outcome you were expecting, because it defines the height of the body as something that is relative to the viewport, which in turn gives .local something to be a percentage of.
Your problem is that your wrap class (in addition to your local class actually occupies no height. You specify a min-height: 100% in your body, but as body has no parent with a fixed height, that won't do actually ever do anything ;)
What you're actually looking for is height: 100vh on body to make sure it occupies 100% of the height of the page. An example of that can be found here.
However, what I would recommend is to instead set the height in the wrap class.
.wrap {
position: relative;
height: 300px;
width: 70%;
background-color: white;
left: 15%;
}
This will bring up the second background colour, as expected :)
I've created a fiddle showcasing this here.
Hope this helps!
I am trying to put a div on the left side of my webpage that has not to be fixed and has to be 100% of the height and 30% width. I mean, that if you scroll, it will be scrolled also and it will not be fixed in the same position all the time.
The problem that I am having it is that when I put height: 100%; it does not cover the height that I am indicating to him. It only covers the full height when I set position:fixed but never when I set it to static, absolute or relative.
What I though it is that it could be that I had to set width: 100%; and height: 100%; to the <html> tag but it does not seem to have any difference if I compare it with <body> tag (I know there are differences between both tags but I do not know if in this case they will be aplied, I think no).
Here is my html code:
<html>
<head>
</head>
<body>
<h1>This is a prove</h1>
<div id="proveDiv">
<h1>Hello</h1>
</div>
</body>
</html>
Here is my CSS code:
html{
/* position: relative; I comment these lines because I saw that there are not any effect
width: 100%;
height: 100%; */
}
body{
position: relative;
width: 100%;
height: 100%;
}
#proveDiv{
position: fixed;
width: 30%;
height: 100%;
background-color: red;
}
Here is the fiddle in which you can see the effect. Just try to change the position attribute on proveDiv id css and you will se what I refer to.
I am stuck here and I cannot find any solution by myself or in SO. Am I missing something?
Thanks in advance!
Set the min-height of the div to view-port height like min-height: 100vh;. Updated fiddle
#proveDiv {
width: 30%;
min-height: 100vh;
background-color: red;
}
Based on your description, this is the working demo that I came up with.
http://codepen.io/BenCodeZen/pen/JXLbjN
The solution is based on a display: flex; on a parent container and defining the height of the element using height: 100vh; instead of 100%. By using flexbox, it will allow you more control over the layout for responsive design.
Let me know if you have any questions.
The reason why this happens is because, when you use the attribute fixed, for some reason, the div's height will increase because it's inherited by default from its container. In this case, when your div is fixed and its height is set to 100%, the div takes the full height of its container which is the body.
PS: In case you want the div to have its initial height, you can use position:initial.
On the other side, using position:relative is your best option.
By default, the div will have its own initial height which depends on its content. When you have more text inside your div, it will automatically increase its height.
To solve your problem, use a relative position and set the height as you want. (100% will make the div take the height of the body)
Note that it is important that you set both the body & html tag's height otherwise it won't work. (If you need further explaination, just comment below)
This is how your CSS should be:
html,body{
width: 100%;
height: 100%;
}
#proveDiv{
position: relative;
width: 30%;
height: 100%;
background-color: red;
}
If you have any questions, comment below.
Is there a way that I could set a DIV element to take up all the height on the page. Something like:
div.left {
height: 100%;
width: 50%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
I've Google'd it a few times but they all seem like really really complicated work arounds for what is probably a really really simple problem with a simple solution.
If the div is a direct child of body, this works:
body, html {height: 100%; }
div { height: 100%; }
Otherwise, you have to keep adding height: 100% to each of it's parents, grandparents,... untill you've reached a direct child of body.
It's simple. For a percentage height to work, the parent must have a specified height(px, %... whichever). If it does not, then it's as if you've set height: auto;
Another way to do it is as you have in your answer: it's to give it an absolute position value, relative to the element that defines the page's height.
This is the simplest way to make a div take up the full height of a page.
height: 100vh;
vh is Viewport Height, and 1vh is equal to 1% of the height of the viewport. See here for more details on this and other units of measurement in CSS.
Make sure you set height: 100% to html and body so that the div has a context for height! Hope that helps.
Pretty sure you need to set the html and body to 100%:
html {
height: 100%;
}
body {
height: 100%;
}
div.left {
height: 100%;
}
Fiddle here.
This problem can be solved using CSS flexbox.
Go through the w3schools documentation of flexbox here and another helpful link css-tricks here
In this scenario.
put display: flex; in the parent div container
div.container{
height: 100%;
display: flex;
}
then in the child div put display: 1;
div.left{
height: 100%;
display: 1;
}
note that if the height of the parent div container is set dynamically, the child div will always have the same height as the parent.
I thought this was a simple fix:
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?
width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.
Example of a page with 1054px square content and a full background:
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
In CSS:
body: { margin: 0; }
IN jQuery:
$('body').css('margin', 0);