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%
Related
I have a div I want to extend to the bottom of the page. The standard approach for this seems to be to set the min-height to 100% for the div you want, the body, and the html. I have done this, however, browsers (tested on both firefox and mobile safari) don't seem to care. Simplified code:
<html>
<head>
<style>
html{
min-height: 100%;
position: relative;
}
body {
min-height: 100%;
position: relative;
}
#main {
min-height: 100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id='main'>
<p>content</p>
</div>
</body>
</html>
A closer inspection with firebug reveals that it reads the css is read, and says that it computed a height of 986px for html and body elements (on a 1080p monitor), but only 517px for the div. What's really weird though is that the layout tab seems to indicate the height of the body element is only 517px, even though it computed it should be 986px.
So the browser knows what the height should be, but refuses to actually set it. What the actual ...
EDIT: I came across a similar question, which was answered with the suggestion one uses vh instead of percentages. This worked for the body and html tags, but when used on the div it makes it longer than the page because there's actually a header above the div. So I'd use percentages, but they result in the same issue I had with body originally: it's read, computed, but not executed.
The code in the first comment did the trick. I have no idea how, but it works now. Leaving the code here for future reference:
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow:
column nowrap;
}
#main {
flex: 1;
}
Thanks, Anton Strogonoff!
Please try this code may be it's help you.
<div id=fullheight>
Lorem Ipsum
</div>
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
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.
As you can see on this link ( http://riksblog.com/Marnik/index.html ), for some reason the width of the body and website is as it should, but there's a strange, empty space next to my website which makes it wider than it should.
I'm using bootstrap so I'm not really able to use these tricks like media-queries in css for the desktop version.
your looking for the overflow css property try this:
body {
overflow-x: hidden;
}
to completely remove the problem get rid of the right padding on this class:
section.first .section-content {
padding: 150px 15px //remove left/right padding
}
The problem is this css:
section.first .section-content {
position: relative;
width: 100%;
padding: 150px 15px;
text-align: center;
}
which causes the .section-content div to be as wide as its parent plus 30px.
Possible solutions are to add a box-sizing property to the style
box-sizing: border-box;
or change the width so that it doesn't exceed its parent
width: calc(100% - 30px);
This is the css of my div. İ expect the background to fill the whole screen but it is bigger than my screen resolution, so a bottom scroll bar appears
.hero-unit {
padding:60px;
margin-top: 60px;
background: url("../img/bar2.jpg") no-repeat scroll 0;
height:233px;
width:100%;
left:0px;
background-size: cover;
position:absolute;
background-color:#eeeeee;
}
You can use box-sizing
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
This makes it so when you add padding, margin, or borders it will not effect the width. (this will not work IE7 and below)
You are adding padding to the already 100% width.
What you need to do (if you are using percentages) is change your padding to be a percentage and make it add up to 100 percent.
For example:
padding:5%;
width:90%;
I also found an alternative using overflow:hidden to remove the scroll bar. This will not remove your issue though as the padding will still overflow the window, just not visibly.
html, body
{
width:100%;
}
body
{
overflow:hidden;
}
See the jsfiddle here.
remove padding if it is necessary then decrease width.
Try to keep them in percentages like
padding:5%; /*desired value*/
width:80%; /*desired value*/
when they will be added, it should be less than or equal to 100%.
If you have margin then consider it also. (assume margin:5%;)
For Example:
<----------------100%---------------->
margin | padding| div |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->|
This is same for Horizontal (width) or Vertical (Height) adjustments.
Often horizontal overflow happens due to an element whose opacity is 0. You can't also see the element but it leads to horizontal overflow. Add the following code to css.
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
This might be due to the margins and the padding of the body.
Add this block to your body to see if it helps:
body {
margin: 0;
padding: 0;
}
Additionally, you're defining padding to an already 100% element, making it larger than the body.
I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
body {
overflow: auto;
}
#container {
min-width: 960px;
zoom: 1; /*For ie6*/
position: relative; /*For ie6/7*/
overflow: hidden;
margin: 0 auto;
}
#main {
background: #cea;
width: 960px;
margin: 0 auto;
height: 700px;
position: relative;
top: 0;
}
#right,
#left {
position: absolute;
height: 100px;
width: 100px;
top: 0;
z-index: 100;
}
#right {
background: #797;
right: -100px;
}
#left {
background: #590;
left: -100px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>
Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.
So use what you have now with this adjustment:
html, body {
height: 100%;
width: 100%;
margin: 0;
*overflow-x: hidden;
}
body { text-align: center; overflow-x: hidden; }
Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.
I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.
#boxescontainer {
position: relative;
max-width: 1100px;
min-width: 980px;
}
#boxes {
max-width: 1100px;
min-width: 900px;
height: 142px;
background:url(../grfx/square.png) no-repeat;
background-position: center;
z-index: 100;
}
I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.
On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.
In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.
Your body is not set to relative.
Not knowing what you'd like to do with this, I would perhaps set a background image on the body instead.
You're getting a scrollbar only when the viewport's thinner than the main plus that right box, right? (Don't think that was clear to some people.) This is expected browser behavior for content overflow.
Depending on what you want to happen (why do you want it to disappear in this circumstance, if you do?), you could set overflow:hidden on .wrapper. That would always hide it--if you're looking to dynamically display it on some other event, that'll work.
If I'm not mistaken, though, you just don't want it to show when their viewport's only 960px wide. AFAIR you can't do that without some js/jQuery. My suggestion would actually be--especially if you don't want to mess with javascript--if you want this content to be visible at all, accept the scrollbar at narrow widths. It might irk you as a designer, but most people won't notice it, and those who do can still access your content--which is a win, right?
Wrap all the elements in a div, make that div position relative and overflow hidden. It solves this problem every time. :D
If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.
Try this:
<html dir="rtl">...</html>
This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.
You can do the same with direction:rtl css property.
If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.
Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.
#bodyInner {
width: 100%;
min-width: 960px;
overflow: hidden;
width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
I needed a solution like this too - thanks to all who suggested the 100%-wide wrapper with overlow-x hidden. However, I don't think you have to add the extra #bodyInner div - I've successfully tested it applying the width and overflow attributes directly to body in Safari, Opera, Firefox, Chrome, and IE8.
I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.
Create wrapper (#bodyInner) around everything inside your <body> tag.
Apply this CSS rule:
#bodyInner {
width:100%;
overflow:hidden;
min-width:960px;
}
Too bad you can't just apply this on the <body> element.