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.
Related
So I am looking at this website because I really like the design and I want to make something similar. I see that every section fits 100% of the viewport and they achieved this in a weird way.
They had a "div section-background" inside each section. And that "div section-background"'s position is relative to each section. Then they set the background colour.
My question is why couldn't they just direction set the background colour to each section. Say the website has 6 sections. Couldn't they just do something like:
<body>
<section class="section1">
<section class="section2">
.....
</body>
CSS:
body, html {
height: 100%;
}
body section {
width: 100%;
min-height: 100vh;
}
.section1 {
background: blue;
}
.section2 {
background: red;
}
It gives the same result. Is there an advantage to the way they did it?
Hope this makes sense.
Thanks
You were almost there.
1st, you didn't close your section tags. Maybe just because of the description.
https://jsfiddle.net/jhe3daq0/2/
Use width and height 100% on the container and ALL the parents to achieve that. VH and VW will help/work too but the scroll bar screws up the layout once it displays.
html, body, section {width: 100%; height: 100%;}
Lets see
you need to make body use 100% of width and height
to achieve you start with this:
body {
width:100vw; // viewport units FTW
height: 100vh;
}
so now you can style you section, for this you can use the same with a lil diference
section {
width:100vw; // viewport units FTW
max-width:100%; // so no horizontal scroll apears when vertical scrollbar is showing
height: 100vh;
}
hope this helps
You can also also the same which you did, with "vh"
body section {
width: 100%;
min-height: 100vh;
}
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.
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.
Problem
In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.
I have tried
Adding html, body { height: 100% },
Adding html, body, #canvas { height: 100%}
Adding #canvas { min-height: 100% }
Adding html { height: 100% } body { min-height: 100% }
And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).
Example
When I add elements to my div I get the following behavior:
I want to remove that white empty space, but I can only achieve that when using px instead of %.
Less example:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: #cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: #companyColor;
color: #textColor;
}
.incidentContainer {
background: #appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: #textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: #companyColor;
}
Extra information
I am using AngularJS, so my application is a single page application. My index.html looks as follows:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>
With of course the standard links to my CSS sheets, and so on.
All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.
Solution
The solution was to add the following CSS rule:
div[ng-view]{
height: 100%;
}
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.
Credits go to Jai for this answer!
Have you tried to add the following css and set Important attribute
html, body { height: 100% !important }
What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.
But in case of your content area, that is relative to the ng-view div.
I would recommend you to make it 100% height. Something like:
div[ng-view]{
height: 100%;
}
This most likely is because of the fact that in CSS the 100% is a relative value.
With width the default 100% is the width of the screen, or whatever you are looking at.
Height however does not take the height of the screen as 100%. It needs a solid value.
I think that if you change
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
with
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
}
it should work.
The 100vh should set the height of the html to the height of the viewport.
I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.
Yay, rendered HTML!
class="incident" is only expanded as large as it needs to be. I believe your fix should be to make that element have a height of 70% (because it will be relative to the whole-page) and then incidentContainer should have a height of 100%.
Percentage heights are relative to the parent element, not the root, so you need to be very aware of any containers, even ones stealthily added by a framework.
Also, if it helps, Jelmergu suggested the vh unit type. This could fit your use case - one "Viewport Height" is equivalent to "1% of the browser's content area". So, 100vh would take up the whole screen. This is true even on deep-level children.
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
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.