I've been told to use position: relative but when I go to view it in the browser it doesn't show up, please could you tell me why?
Here is my code:
HTML:
<div id="box"></div>
CSS:
#box
{
position: relative;
height: 20%;
width: 20%;
background: #366;
}
Just add html, body {height:100%} to your CSS-File.
http://jsfiddle.net/LGJH4/
The problem is with the CSS calculation. By default HTML page has no height.
So, your 20% for the height is just 0 as it is relative to HTML which has 0 height.
The option for you is either propose pixel height for #div or give a height to the whole document.
#box {
height:100px;
}
or
html,body {
height: 100%;
}
/*** Write your css here ***/
Here is a fiddle, http://jsfiddle.net/Pj6Ra/1/
Generally, without a parent element with a defined height, a % height will result in 0px. You'll need to use a different height unit, such as px or em. E.g.
#box {
height:200px;
}
Interestingly, you could use padding-bottom: 20%, although that wouldn't give you the result you expect. The height is then 20% of the width of the viewport, rather than of the height.
Try this code:
DEMO
html,body
{
height:100%;
}
Related
Guys I'm already getting slightly annoyed, I'm not able to find out why I'm managing to set the height of the divs in percentage, because I saw it on a website just to confirm that setting the height of the divs in percentage does not work, unless it is div be a child div, so why the hell can I set the height of the elements in percent even when the div doesn't have a parent div?
Well, my body code in css looks like this:
html,body{
width:100%;
height:100%;
font-family:Verdana;
color:#fff;
backgroundd:#151515;
}
Could anyone explain why this is happening? Why I’m very curious to know why percentage height works when it shouldn’t, this shouldn’t happen right?
If the parent element... body has a width and height of 100% (being the browser frame, should the html element have a width and height of 100%), then of course any children of the body element is going to be relative to that.
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
.container {
height: 50%;
width: 50%;
background: black;
}
<body>
<div class="container">test</div>
</body>
This is exactly what should be happening.
Suppose I have a page and in that page, I have a div named #bar:
In the style tag, I'll write something like:
<style>
#bar {
width: 100px;
}
</style>
I want to write CSS so that the div adjust its height automatically according to the page's height. I'll use the same div in different pages and it'll adjust its height automatically according to the page it is in. Is there any way to do that?
Let me be more specific. Suppose my code is like this:
<style>
#example{
float:right;
}
#bar {
width: 100px;
height:100%;
border: 1px solid red;
box-sizing: border-box
}
</style>
<div id="example"><p>This is page content</p><p>This is page content</p></div>
<div id="bar"></div>
Now, I'll copy and paste the paragraph something like hundred times, so the size of my page will increase. I want my div to automatically adjust its height after I copy-paste the paragraph a hundred times, so that the div will cover top to bottom of my page. Is there any way to do this?
Provide height: 100% to .bar.
.bar {
height: 100%;
}
Also, a thing to note here is you should give height: 100% to the html and the body.
html, body {
height: 100%;
}
You could use position:absolute; as follows:
#bar {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
For a pure CSS solution, you can use #media to change the div's size based on window size:
#media screen and (max-height: 600px) {
#bar {
width: 90%;
height: 90%;
overflow: hidden;
}
}
This will allow you to set exact heights based on the window's parameters.
Here is a JSFiddle Demo.
So I'm trying to make "sections" with section that covers up the full height of the current page. Kind of like this. As you can see the width is set to 100. And heres my code
.cont{
background: #009dff;
height: 100%;
}
But for some reason it doesn't seem to work. Here's a demo. Any ideas?
This should do it.
http://jsbin.com/vijaxuyu/2/edit?html,css,output
html{
height:100%;
}
body{
height:100%;
}
section {
height: 100%;
}
The height % of html and body isn't by default 100%. Hence, you need to inform your browser explicitly. The reason why you have to specify height and sometimes min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
I have an image. This image should have 100% height. So, in my CSS, I defined height: 100%. The problem is the respective width, since this image is a panorama, it will certainly exceed the viewport dimensions. I don't want this to happen. Is there a way like overflow: hidden to completely hide the portion of the image after the maximum viewport width.
HTML
<div id="image">
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
CSS
#image {
height: 100%;
}
Here's the fiddle as well.
http://jsfiddle.net/AH3Hd/
Add this CSS to your div. You need to give it a width or it will just auto adjust to whatever its contents are.
div {
width:100%;
overflow:hidden;
}
http://jsfiddle.net/AH3Hd/4/
To use overflow:hidden;, you need to specify a width to the div, otherwise the browser will not know when to hide. I edited your fiddle to show that:
#image {
height: 100%;
width: 100%;
overflow: hidden;
}
http://jsfiddle.net/AH3Hd/6/
You could do something like this:
#image {
overflow: hidden;
height:300px; // Depends on the size you want
width:300px;
}
#image img{
height:100%;
}
Here's the fiddle: http://jsfiddle.net/jwvanveelen/AH3Hd/7/