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.
Related
I often need that html and body elements have the size of the screen. Typically, in the case when I want to have a svg element fit the whole screen.
To achieve that, I saw that it was possible to use CSS code as follow.
html,body{margin:0;padding:0;height:100%;}
The code that I personnaly use is the following one.
html {
height: 100%;
display: flex;
}
body {
flex-grow: 1;
display: flex;
flex-direction: column;
}
Both seem to work well, but I recently had the following remark.
html { height: 100%; display: flex; } is a useless declaration. html height will always be calculated to fit content. Also 100% means 100% of the parent. html has no parent... also applying flexbox to html is useless as it only has 1 child element that is visible: body.
Actually:
I put 100% of html height in order to have it fit the screen height.
I apply flexbox to html in order to be able to use flex-glow: 1 on its child, and have this child filling its parent.
Is there any better to solution than mine?
I personally use this:
html {
display: grid;
min-height: 100%;
}
This will make your body full height by default and will also respect default margin
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
And you can easily use height:100% on an inner element without issue:
html {
display: grid;
min-height: 100%;
background: blue;
}
body {
background: red;
}
.box {
height: 100%;
border: 5px solid green;
box-sizing: border-box;
}
<div class="box"></div>
I find that whenever working with elements that need to be the full height of the screen height: 100vh is usually a good place to start. VH = viewport height. I use it over height: 100% as depending on the layout 100% doesn't always equal the page height, so with VH you know exactly what you are getting!
With VH you can also then use a calc() in your CSS, so if you needed your body to fill the whole height of the page, but subtract the height of a header for example you could do something like this:
<header style="height: 64px">
<section style="height: calc(100vh - 64px)"
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;
}
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.
I like to think I'm pretty good with CSS, but this issue is driving me crazy.
I'm trying to get 3 columns to be 100% height. The first two columns are floated left, the third is not floated, just margined over. There is a wrapper around all 3 columns that clears the floats. The HTML/BODY tag have 100% height on them. As far as I know, if all parent containers have 100% height, it should work. The wrapper should be as tall as the tallest content block (third column), so the first two columns should be that tall too, using 100% height.
Problem is, the wrapper, and thus the body tag, have a height equal to that of the browser window. For some reason it won't read the middle columns content height. There is probably a super stupid simple explanation for this and I'm just missing it.
Don't want an overflow hack. Cannot do faux columns. I don't see why this can't work using the CSS spec for height.
If I put a pixel amount on the wrapper div, like a 2000px height, the first two columns fill the height just like I want them to. Why isn't this working??
HTML:
<body>
<div class="wrapper clearfix">
<section class="sidebar-news clearfix"></section>
<section class="black-bar-vertical"></section>
<section class="section-main-content event-detail"></section>
</div>
</body>
CSS:
html {
height: 100%;
}
body {
background-color: #333;
height: 100%;
* {
box-sizing: border-box;
}
}
.wrapper {
height: 100%;
position: relative;
margin: 0 auto;
}
.sidebar-news {
float: left;
width: 300px;
height: 100%;
min-height: 100%;
background-color: #site-color-yellow;
margin-right: -25px;
padding: 76px 40px 20px 20px;
}
.black-bar-vertical {
position: relative;
float: left;
width: 116px;
background: url("#{img-path}/black-bar-vertical.png") repeat-y top center;
min-height: 100%;
height: 100%;
text-align: center;
margin-right: -25px;
padding-top: 81px;
z-index: 50;
}
.section-main-content {
width: 580px;
background-color: #FFF;
padding-top: 55px;
padding-left: 10px;
margin-left: 360px;
}
SCREENSHOTS:
Top & Bottom of page
The height of the two columns in dev tools
EDIT:
Found this article, which is basically the same problem.
html body is smaller than its contents
If I change the height property to min-height on the body, the wrapper becomes the full height of the content, yay! But then the 100% heights on the first two columns don't work at all.
Like I originally thought... if 100% height is set on an element, it bubbles up the dom, and inherits the height of it's parent container. If that parent container has 100% height, it inherits the height of the parent's parent, etc. That works as expected. But when it hits the body tag, with 100% height, it's reading that as 100% height of the browser window. That's the default behavior, which doesn't make sense to me. If you take off the height on the body, it encompasses all content, but then the wrapper div looks up to the body for it's height definition and get's nothing because there is no height set on the body.
It's seeming like this specific scenario isn't really possible without using flexbox, table layout, javascript, or absolutely positioned elements.
Flexbox fo-sho!
.wrapper {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: stretch;
}
.sidebar-news {
min-height: 100vh;
flex-grow: 1;
}
.black-bar-vertical {
min-height: 100vh;
flex-grow: 1;
}
.section-main-content {
min-height: 100vh;
flex-grow: 1;
}
Check this out for ref- Flexbox CSS Tricks
I've decided to do a combination of faux columns to get the first and third columns background colors, and then an absolute positioned second column that I can stretch full height using top: 0, bottom: 0.
If anyone can still solve this problem, I'd love to hear how it's done!
I'm trying to create a div that will expand to 100% of the screen height when there is not enough content for it to do so normally, but will expand normally beyond that if there is enough content. If my div is called container, then whenever I use
#container
{
min-height: 100%;
}
it seems to have no affect on the height at all. When I use
#container
{
height: 100%;
min-height: 100%;
}
it sets the height to a fixed 100%, cutting off any content that would normally be past 100% of the screen height. I'm not sure what I'm doing wrong.
You can try
body, html {
height: 100%;
}
Borrowed from this answer. You can also refer this.
Fiddle
Maybe could you give us a JSfiddle of your HTML ? It would help us helping you.
I think you could use:
#container
{
height: 100%;
overflow: auto;
}
Or play around with position/float/clear.