I am trying to setup my CSS but i have found the body size is bigger than my screen size, which means everything else becomes slightly out of place. I have tried width 100% and 100vw but still get the same results
You can see in the image below the border on the right has disappeared and there is a scroll bar along the bottom.
body{
border: solid;
width: 100%; //or 100vw
}
just to add the only way to bright this in is to do width at 99%. Is this normal practice
By default, body has some margin attached to it. Assign margin: 0 and overflow-x: hidden to the body will fix this problem.
body {
margin: 0;
overflow-x: hidden;
border: solid;
width: 100%; //or 100vw
/* if you want to add some gaps between the edge of the screen, use padding instead */
padding-left: 2px;
}
Also, since you have border assigned to the body. It's better to change the box-sizing to border-box to all your element by default, otherwise your border will be cut off if you assign width: 100% to your body:
* {
box-sizing: border-box;
}
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%
I have created a set of very simple css classes for the layout.
Plnkr
However, I am not able to get rid of the scrollbars on the preview.
It must be a very small and silly thing, but I am not able to get hold of it.
First of all, add:
margin:0;
in your html, body{ css style.
eg:
html, body{
margin:0;
/*more code*/
}
Also, you've set your menubar-left to height:100%.
menubar-top is 50px high.
This means that together, it's 100% + 50px.
You can either set menubar-left's height to height: calc(100% - 50px); or change menubar-top to a % then take that away from 100 and that will be your new menubar-left height.
This is what your code should look like after:
plnkr using calc()
menubar-left{
height:calc(100% - 50px);
/*more styles*/
}
plnkr using %
menubar-top{
height:5%;
/*more styles*/
}
menubar-left{
height:95%;
/*more styles*/
}
body has default 8px margin, so body {margin: 0;} - it's horizontal scrollbar
vertical scrollbar is because of .menubar-left {top: 50px; height: 100%} - total height is 100% + 50px. You can fix that with using overflow: hidden, top in % or another wrapper element
Demo
body, html{
height: 100%;
width: 100%;
position: static;
margin:0; /* need to avoid scroll bar as body has default margin */
}
.menubar-top{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px; /* 50px height here given so adjust this from .menubar-left which has 100% height */
}
.menubar-left{
position: absolute;
top: 50px;
left: 0px;
width: 60px;
height: calc(100% - 50px); /* as you have given 50px height for .menubar-top to need to adjust this 50px with height of .menubar-left */
}
Ok...here is my problem:
I have a webpage with html & body set from css to:
body,html{
position: fixed;
width: 100%;
height: 100%;
overflow:hidden;
}
and also a webkit tag to disable the scrollbar:
/*Disable scrolling*/
::-webkit-scrollbar {
display: none;
}
inside of the body i use 3 divs to cover the entire available space in the page:
(i will not use the actual css code for the divs because it's unimportant for this matter and i will write only a basic code to get the ideea)
As i said, three relative divs to cover the available 100% height and width:
.div1{
position: relative;
width: 100%;
height: 10%;
}
.div2{
position: relative;
width: 100%;
height: 80%;
}
.div3{
position: relative;
width: 100%;
height: 10%;
}
Now here is my problem:
* inside the middle div (div2) i have 4 concentric circles all of which are absolute divs wrote in css3. It is really important that these divs remain "absolute".
here is the css for them:
.size-large,
.size-normal,
.size-small,
.main-frame{
position:absolute;
left:0;
right:0;
margin:0 auto;
background: transparent;
border: 3px dotted #999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 50%;
}
.main-frame{
width: 50%;
padding-bottom: 50%;
margin-top:-25%; /* push back half */
}
.size-large{
width: 30%;
padding-bottom: 30%;
margin-top:-15%; /* push back half */
}
.size-normal {
width: 20%;
padding-bottom: 20%;
margin-top:-10%; /* push back half */
}
.size-small {
width: 10%;
padding-bottom: 10%;
margin-top:-5%; /* push back half */
}
Problem is that those circles does not resize acording to the relative div of which they belong.
Their width/height given in percentages, is set acording to the body element.
I want my design to be liquid and to use only the available webpage without scrolling but also to resize all it's elements on any display.
FULL SCREEN RESULT: http://jsfiddle.net/Nn7mU/1/embedded/result/
CODE VIEW: http://jsfiddle.net/Nn7mU/1/
From my understanding, you want to ensure your concentric circles to stay within the blue div whilst maintaining a perfect round circle according to the percentage width you have set (i.e. .main-frame {width: 50%}, .size-large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})
Your circles are indeed adjusting according to your blue div (based on width % not height %). So since your blue div has width=100%, the circles will adjust according to that only.
You will need to find a way of using BOTH height and width % so it maintains aspect ratio and central positioning.
I would recommend reading on this thread which provides possible solutions:
HTML and CSS Fluid Circle
I want to make a bar at the top of my site similar to the one on stackoverflow or facebook. I have the following code:
#topBar {
background-color: #3B5998;
height: 41px;
left: 0;
width: 100%;
z-index: -1;
}
There seems to be a white region surrounding the bar in my browser. How can i remove that surrounding area? Border,padding, and margin are all 0.
You need to set the margins and padding on the body to 0.
body{
margin:0px;
padding:0px;
}