This webpage being in beta, http://porkystuff.com, has a very big problem.
The webpage is larger than the BODY and the HTML tags. I've checked this with developer tools in both Chrome and Firefox.
I HAVE tried adding html, body{ height:100%; }.
Got it!! in your CSS a class name sidecontent height is 150%.
.sidecontent {
position: absolute;
width: 180px;
height: 150%;
left: 820px;
top: 50px;
}
in my case i just needed to stretch the body and html tag to full-page size by these CSS tricks:
html {
min-height: 100% !important;
}
body {
min-height: 100vh !important;
}
reference link : https://makandracards.com/makandra/39473-stretching-an-html-page-to-full-height
Related
Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Example also on JSFiddle
If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).
It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.
Based upon #BoltClock♦'s answer, I fixed it by zeroing the margin...
so
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
A bit late, but maybe it helps someone.
Adding float: left; to #container removes the scrollbar, as W3C says:
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
height: calc(100% - 50px);
browser support is good, but only IE11+
https://caniuse.com/#feat=calc
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.
No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.
here's my fix on jsfiddle.
you can add non-breaking space into the body tag.
<body> <othertags>...</body>
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
body {
height: 100%;
overflow: hidden;
}
Inspired by #BoltClock, I tried this and it worked, even when zoom out and in.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess body was shifted down 20px.
It works for me:
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
#-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
Add overflow: hidden; to html and body.
html, body {
height: 100%;
overflow: hidden;
}
I found a quick solution: try set height to 99.99% instead of 100%
First let me say that it seems Internet Explorer 8 completely ignores box-sizing: border-box; declaration on a box, when there is a min-height set on it as well (this post confirms that: https://stackoverflow.com/a/11714178/3355252).
Now let me describe what I need to accomplish. Here's my site (much simplified): http://jsfiddle.net/ttKP3/. Doctype is HTML 4.01 Strict.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head></head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#main {
box-sizing: border-box;
min-height: 100%;
width: 300px;
margin: -100px auto;
padding: 100px 0;
}
What I need is footer at the very bottom of the screen and the main box filling the whole screen from the top to the bottom. Also, when the content gets bigger (click Add content in JSFiddle few times) I need the main box to enlarge and footer to move accordingly.
It renders just fine in Chrome and Firefox. You probably won't be able to run it in IE8 (it doesn't render JSFiddle), but border-box property on main is completely ignored and so that main box is 200px higher than it should be - the footer is below the visible area of screen.
As it looks like it couldn't be handled by using border-box and min-height, I'm looking for any other solution for IE8. The only one that came to my mind was using calc, that is height: calc(100% - 200px); but IE8 doesn't support that as well. By the way I have a conditional adding ie8 class on html element when ran in IE8, so I don't need a cross browser solution - just CSS to get the desired layout in that particular browser.
After reading once more this sticky footer post on CSS-tricks and tinkering a bit, I found a clean solution that doesn't require any markup changes (you can do with only 3 containers: header, main and a footer) nor using box-sizing at all. It works in IE8 just as well.
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#header {
margin-bottom: -100px;
}
#footer {
margin-top: -100px;
}
#main {
min-height: 100%;
width: 300px;
margin: 0 auto;
}
/* Space for header and footer. */
#main:before,
#main:after {
display: block;
content: "";
height: 100px;
}
You may like to apply the margins to main instead of header and footer.
Here's my fiddle with this solution applied: http://jsfiddle.net/ttKP3/1/
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
I want to make on iframe full screen. Here is the code:
http://jsbin.com/ibopes/1/edit
and here is the demo:
http://jsbin.com/ibopes
Why the scrollbar? For some reason I can't use position: absolute for the iframe, and I don't want overflow: hidden on body.
How to hide the scrollbar, and why is it there?
Specify display: block on your iFrame. jsBin normalizes the CSS for you:
#test {
width: 100%;
height: 100%;
min-height: 100%;
border: none;
background: #ff0000;
display: block;
}
See the working demo here > http://jsbin.com/ibopes/5
I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.
body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }
#parent
{
min-height: 100%;
position: relative;
}
#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }
#content { padding-bottom: 150px; position: relative; }
#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }
The HTML structure is as follows:
HTML body tag
parent
header
content
footer
Update
I figured if I add a conditional this selector for IE, it works in both browsers.
#parent { height: 100%; /* min-height: 100%; */ }
Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?
This should help:
html {
height: 100%;
}
Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.
I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.