If I have:
body, html {
height: 100%;
}
innerDiv {
height: 100%;
}
is the height of innerDiv = height of view port, namely the window?
... or is the height = height of all the window’s content, which may be very tall, that is, way below the window’s bottom edge?
I know I could just use 100vh, but I wish to avoid viewport units totally.
height=100% mean that the element should of that % in the parent element.
So here, If you have just a innerDiv in the html, the 100% would be just the innerDiv element. It wraps around it.
Tip: Always use border to try out the styles so that you are sure of what's happening.
Related
I have a div with three images (in varying aspect ratios) in it. Lets say image1 is 16:9, image2 is 4:3, and image3 is 1:1.
I want all images to have the same height, so I set their height to 100% and their width to auto.
Now I want to scale the whole div up so that it takes 100% of the container, or in my case 100vw.
The goal is that the height of the div scales up accordingly, so that the images in the div scale up too, so that in the end I have a row of 3 images that take up 100vw and all have the same height.
The problem is that I can't get this to work. When I give the div a fixed height, the images scale up properly, but I want it the other way around, so that the height of the div is flexible and the height of the images gets scaled up until the whole row fills 100% of the container of the div.
Can someone help?`
What I have:
.gallerygroup3 {
height: 500px; /* <-- Works widht a fixed height, but not with 100% or anything else */
width: 100vw;
}
#gallery img {
width: auto;
height: 100%;
}
Try changing the width : auto; in #gallery img to width : 33.33vw (since there are 3 images), then try changing the div's height, and it should work. Hope this helps! :D
I have a panel with a height of 100vh, so 100% of the screen (but height: 100% doesn't work, for some reason).
This panel must show a div with its own contents and the footer.
The footer is normally displayed under that panel, but in the front page it must be inside it, so I have to disable the normal one and call it inside the panel.
Thus, it must have position: absolute and bottom: 0.
Now the problem is that the footer takes its own height (which changes a bit when resizing the window's width), and the other div in the panel must take all the remaining height.
So, is there a way to set that div's height dynamically, rather than filling the CSS with media queries for each window width where the footer's height changes, setting it as height: calc(100vh - [footer height])?
Firstly, if you don't set height for parent elements, setting height in percentages on the child won't work. Your parent elements should have their height set to 100% (including html and body elements).
Secondly, if your browser support is IE10+, I recommend using flexboxes.
Here's how you do it (without browser prefixes):
.parent-container {
height: 100%;
display: flex;
flex-direction: column;
}
This will set the parent container as flexbox and change its direction to "column" (so its children stack one under the other).
.expanding-child {
height: 100%;
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1;
}
This is the wrapper for your content. It will expand as much as it can, keeping in mind your footer's height.
.sticky-child {
flex-basis: auto;
flex-shrink: 0;
flex-grow: 0;
}
This is your footer that will now always be at the bottom, pinned, without overlapping the scrollable content.
Here is what your HTML would look like:
<div class="parent-container">
<div class="expanding-child">
</div>
<div class="sticky-child">
</div>
</div>
And I made a quick fiddle to demonstrate it here
This will work as intended only if you set height to 100% on all parent elements.
Edit: here is a good source to learn more about flexbox, I recommend looking into it. And here is one I used when I first started using flexbox.
I think you are asking about sticky footer. I hope it will helps you. Always footer fixed at bottom using FlexBox
Fiddle
I have a website with 5 horizontal divs whom all float:left and have a % width. The left one I want to have text in, and a scrollbar. However, the scrollbar only shows up when I give it a position:absolute. Try it in the jsfiddle. When I do that, the div ignores the other 4 and they get out of line. How do I work around this?
The jsfiddle > http://jsfiddle.net/QN8RS/
Add position:absolute; to the following div in CSS. You will see it working, but the divs get out of place..
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
overflow:auto;
top: 0px;
bottom: 0px;
}
You haven't specified the height of the <body> so its height is computed as auto.
You specified the height of .main as 100%. This is a percentage so, because the height of its parent (the body) is computed as auto, the computed height is also auto.
You specified the height of #left as 100%. This is a percentage so, because the height of its parent (.main) is computed as auto, the computed height is also auto.
Since the height is auto, the height as is tall as it needs to be to hold all the content.
Since you have set overflow: auto, you only get scrollbars if the content is taller then the element (which it isn't).
Set height: 100% on the html and body elements so that the computed height of #left is the height of the viewport and not auto.
I think you are looking for :
overflow-y: scroll
Little Fiddle
The reason is that you have specified height:100% on your div .main. 100% of what? Which parent?
If you specify the height of body to 100% then it will work.
html, body { height: 100%; }
Check your updated fiddle: http://jsfiddle.net/QN8RS/2/
Instead of using floats, use position: absolute; and left: number%; (you will have to figure out how much % the left is of each element).
Check out the Fiddle:
http://jsfiddle.net/QN8RS/3/
This is my first attempt at anything with the <header>,<footer> elements in HTML5. Usually in XHTML I would have the div that was the footer inside of the container <div> and the center would expand all the way down with clear:both.
I am trying a 100% width template here and I am not getting the center area at 100% height. Can you guys see anything wrong with this?
The code is at: http://www.designinipad.com/html5test.html
or at:
https://gist.github.com/1524774
Thanks!
Whatever you did using the div element in the past will work identically using the header and footer elements. Like the div, these are just container elements and behave the same way.
If you set the height of container, body and html to be 100%, it should work:
body, html {
height: 100%;
}
This question should be helpful: Make div 100% height of browser window
My only concern is that assigning a height to < html > and < body > does not seem to be standards compliant.
Could you work around it? Perhaps assign a min-height to the < div > with id container around 700px to push it down?
#container {
min-height: 700px;
}
I want to make a div 100% height, so basically the full screen.
This, so that the background streches over the whole page.
I don't want to add the background to the body, since i want it so that if i comment out the wrapper, the page is full width. (which works by the way)
So basically my question is: how can i make the wrapper-bg div 100% high.
Hope you guys can help me.
Make the body height 100% because div width or height will apply only if the parent been set to a certain value
for example if the body 100% the div height 100% will work cause the parent been determined
Try this, should work as you have to make all parent elements 100%.
html, body {height: 100%}
.yourdiv {height: 100%}
Try with .wrapper-bg {position:fixed; top: 0px; bottom:0px}
html,body{height: 100%}
Make sure that your parent element has height 100% and it should be positioned as relative.
Try making it absolute. Your child div strech to parent height.