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.
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.
I'll trying to create website with horizontal scrolling.
But when I set element wider than viewport - body is do not wider.
Following code doesn't works
body {
float: left
}
How I can do body wider than viewport?
I create fiddle for this - https://jsfiddle.net/stas_webdev/9L1gLoww/
Update: I have a unknown num of .grid-cell blocks, in theory. So, I don't know, how wide should be body width in each case. It should be flexible.
If you have unknown number of cells then just add overflow property on your html, body. see below:
html, body {
position: relative;
height: 100%;
background: red;
overflow: auto;
}
To make your body wider, you can set its width attribute to something bigger than your viewport's width. For example:
body { width: 150%; }
This will take your viewport's width and make the body's width 50% bigger.
I'm trying to make a container fill the entire page (or the viewport, whichever is larger), but ran into some trouble. I'm using the recommendations from this post: https://stackoverflow.com/a/17555766, to set the <html> and <body> to 100% height.
But I've noticed that the .Content div only fills the viewport when the <body> height is set with height: 100%, but not with min-height: 100%. Why is that? Why doesn't .Content pick up the height of the <body> when it's set with min-height? Is there a fix for this (without absolute positioning or fixed heights)?
html
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen: http://codepen.io/anon/pen/mJEMVX
P.s.: when the <body> height is set with height: 100%, both min-height: 100% and height: 100% work as expected for .Content.
Percentage heights refer to the computed height property of the parent element. See the spec. When setting only min-height: 100% on the body element as per my answer to the linked question, the height property is left untouched at its default value of auto. The min-height property does not affect the computed value of the height property.
Because of this, min-height: 100% on your element does not have a parent height to refer to, and so it won't work. Once you set height: 100% on the body element, your element is able to refer to this height for its own percentage height calculation.
How to fix this depends on what sort of layout you're trying to achieve. The only purpose of setting min-height: 100% on the body element is to allow it to expand when the content height exceeds that of the viewport resulting in a scrollbar. If your content will only ever be exactly the height of the viewport, or you don't want body to generate scrollbars, it's as simple as replacing min-height: 100% with height: 100% on body.
Before I ask, I am telling you that I am really a newbie on css. I have been thinking that css and I won't get really along well (Just kidding!) Anyway, my question I think is really simple but I cannot really find a way to let my style act as it should be.
I wanted to have a two-column layout. The left column is fixed on size and the other is fluid. I only want to have it inherit the viewport of the browser window in terms of height and width. I tried adding height:100%; on almost all of my divs but I cannot make it work. Indeed, a total newbie.
I have set up a fiddle to let you look about what my total-newbie-scenario.
fiddle
You were almost there! You forgot to declare the height: 100%; on the body and the html tag.
Since you only declared it on the body tag it has no idea what 100% height is since it's parent, html, has no set height.
Here is the css I changed:
body, html {
margin:0;
padding:0;
line-height: 1.5em;
height: 100%;
width: 100%;
}
#maincontainer {
height: 100%;
}
Finally, a fiddle: Demo
I would also suggest improve the structure of your html.
Here is a fiddle to show how to clean up your structure, Demo.
to make a div's height 100% to window height, you should set body and html height to 100%. then set their children to 100% to make them take the whole height of window..
body, html {
margin:0;
padding:0;
line-height: 1.5em;
height: 100%;
width: 100%;
}
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html