Take this simple example... something I never noticed before now.
HTML:
<body>
<div class="container">
<div class="sidebar">
</div>
</div>
</body>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
border: 1px solid #000;
}
.container {
height: 250px;
}
.sidebar {
width: 20%;
}
setting the height of body to 100% seems to work fine in this fiddle.
however, if you change the size of .container so that it expands beyond the initial window size... you will notice the div breaks out of the body container (it even appears to break out of the html container too)?
Reformatted Question
Is it possible to set height of the body to 100% of browser window initially but also allow the parent containers to expand with its children if it expands beyond the initial window size?
Typically, when you want to have html and body take on the height of the viewport but also allow them to expand with the content, you set height: 100% on html only, and min-height: 100% instead of height on body. Further explanation can be found in my answers to the following questions:
height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>
Unfortunately, because html is the root element, you cannot set min-height on it alone, or everything will fall apart. You need height: 100% because otherwise there is no parent height on which to base body and its contents; the height of html itself is based on the height of the viewport, which as you may have guessed is pre-determined.
This will be problematic if your actual layout has borders on all these elements, so instead I'm going to assume the borders aren't actually needed. You do not need to worry about the background because it will automatically be transferred to the viewport allowing it to cover the entire painting area (details in the second link).
Given your CSS, you can simply set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%:
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
body {
height: auto;
min-height: 100%;
}
Note that I've also removed the borders, again based on my assumption that they're not needed.
Now we have another problem: once the content grows beyond the browser height, the padding on html disappears, since html doesn't expand along with the other content due to height: 100% (scroll to the bottom to see this).
You can't remove height: 100% since it's required, but you can still change the padding on html to margins around body instead because the margins will continue to take effect even once body overflows html, resulting in the following (again, scroll to the bottom):
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
html {
padding: 0;
}
body {
height: auto;
min-height: 100%;
margin: 20px;
}
The default behavior when an element is set to 100% height is to fill its parent entirely, minus the parent's padding value.
Its your padding. I put your code in Dreamweaver and began to check to see why it was doing that. You're right, it works just fine until it smacks out of the viewport by changing the height. I fixed the issue by removing the padding. I suggest reworking how you organized your padding or try using something fill space without using padding. (Such as margin: 5px; for example on the outer layers instead using padding on the inside of the layers. You can even just using a blank fixed height div, afix your inner divs to a percent, and rinse and repeat. Its a dirty method.)
Related
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.
I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.
I have the following layout (I'm using Meteor):
<template name="headerFooter">
<div class="container-fluid fill-height">
{{> header}}
{{> UI.contentBlock}}
{{> footer}}
</div>
</template>
<template name="home">
{{#headerFooter}}
<div class="row body-film">
<div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
{{#each stories}}
<div class="story">...</div>
{{/each}}
</div>
</div>
{{/headerFooter}}
</template>
and this (relevant) css backing it up:
html {
height: 100%;
}
body {
min-height: 100%
}
.fill-height {
height: 100%;
}
The html and body elements are both behaving as expected. They fill their areas at any zoom level or size.
However, the container-fluid with the fill-height class added isn't doing the job. It's only wrapping it's content, and not filling to the bottom. This is a problem because it is responsible for adding body-film and block-film to the page, which are just semi-transparent backgrounds to give the whole thing some color unity.
Here are some screenshots, all with the page zoomed out so the content doesn't fill the height:
Now here it is with the body element selected. As you can see it fills the parent just fine.
But the container-fluid doesn't.
With fill-height I've tried both height and min-height, and they look exactly the same.
Your help is appreciated!
Update
I've been trying every possible combination of min-height and height on these three elements, and nothing works properly.
height on all three works when the content is too small for the viewport, but when the content is too large for the viewport, the content block overflows out of the body entirely, which means the films are too short for it.
min-height on all three seems to me to be the most logical way to go, but it breaks when the content is too small. In this case, the body element doesn't stretch to fill its html parent.
What's going on!!!!????? Is this a bug in the new Blaze templating engine Meteor uses?
Update
I've just tried height: inherit in my fill-height, and it didn't work either. I'm really at the end of my rope. This seems like it should be so simple.
Update
Alright, I've got a slight change to happen. With this less:
.fill-height {
min-height: 100%;
height:auto !important;
height: 100%;
}
.body-film {
.fill-height();
}
.block-film {
.fill-height();
}
The container-fluid is now full height, but not the body-film and block-film which are using the exact same mixin!!
Here is a screenshot, showing the row.body-film, which should be full height, since the container-fluid above it is (take my word for it, the container-fluid is now stretched to fill the body).
Note, manually adding the fill-height to the html declaration of the row didn't change anything, it behaves identically as if it were simply receiving that through the body-film mixin.
Why is it that some elements don't respond at all to all of these min-height demands?
P.S., I'm using Chrome, but it is on a ubuntu machine, so I can't be sure if there are any inconsistencies.
Answer
The following ended up working:
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
height: 100%;
overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
background-color: fadeout(#studio-bar-color, #studio-body-film-trans-delta);
}
.block-film {
min-height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
background-color: fadeout(#studio-bar-color, #studio-block-film-trans-delta);
}
The overflow attribute was extremely key, and it's something didn't previously know much about. Giving a scroll value to the entire body (the thing that needed to be able to move up and down) was the answer, as well as giving the innermost element (block-film) the min-height to ensure it stretched itself and subsequently all of the parent elements.
I know you said you've tried every combination, but what about:
html, body {
height: 100%;
}
.fill-height {
min-height: 100%;
height:auto !important; /* cross-browser */
height: 100%; /* cross-browser */
}
The problem with setting min-height: 100% on the body, is that height: 100% on the child div does not actually have a proper parent height to reference, and will not work.
EDIT:
This logic applies to all child divs. So in your case, the body-film div is a child of container-fluid. Because container-fluid now has a min-height of 100%, and not a defined height (it is set to auto), when you give a height percentage to body-film, it doesn't have a height to reference. It's worth having a read of MDN - CSS height and MDN - CSS min-height.
In other words, if you wish to have a div with a height or min-height of 100%, then all of its parent elements need to have a defined height of 100%, all the way up to the html tag.
What you may need to do is something like this:
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
min-height: 100%;
overflow-y: scroll;
}
This may not be the definitive answer as it depends on what you want exactly, but hopefully this sets you on the right track.
Although this doesn't directly relate to the html sizing problems, I recently discovered a much easier way to achieve this sort of "transparent film" thing, using box-shadow.
This article breaks it down pretty well. He also offers other methods, but frankly this seems like the simplest.
<div class="example"></div>
.example {
position:relative;
width: 300px;
height: 313px;
box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
background: url(/img.png);
}
I'm trying to create a mobile version of my site, but any element with width: 100% and padding keeps spilling over my container section. I understand this is because child element is getting wider than the container of a padding value, but how can I keep them full width but with keeping some padding on the left within the child element (so the text doesn't stick to the browser's window)?
Simple code:
section#main {
padding: 100px 0 0 !important;
width: 100%;
}
input, textarea {
width: 100%;
padding-left: 20px;
margin: 0;
}
Results in:
http://tinypic.com/r/2ytxjk9/5
As is you are basically saying, 100% wide but add 100px padding. The easiest fix is to alter the box-sizing: border-box CSS3 Property. This will make it 100% wide including 100px padding.
I thought this was a simple fix:
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?
width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.
Example of a page with 1054px square content and a full background:
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
In CSS:
body: { margin: 0; }
IN jQuery:
$('body').css('margin', 0);