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'm trying to write an input tag that covers 100% of the div's width and have written the following CSS:
input {
min-width: 100%;
padding: 10px 10px;
margin: 8px 0;
border: 1px solid #3EE514;
box-sizing: border-box;
color: #000;
}
I've tried both width and min-width at 100% but neither work yet when I set a pixel value the input field will increase in size. How do I change the CSS to cover the whole div?
Thanks
When you say width: 100% its taking the parent element's width. But, if the parent doesn't have a specified width, then it's simply taking the 100% of 0 :)
You could either set the outer div to have a width in pixels first, or do something like
html, body {
width: 100%;
}
.outerDiv, input {
width: 100%
}
I'm using the technique from this answer to create a DIV that maintains its aspect ratio when the browser viewport is resized.
However, I want the DIV to only get so big and then stop. But, if I apply max-width: 300px; to the containing div, the div will stop expanding its width when the viewport gets big enough, but the height keeps going, losing the aspect ratio. If I apply max-height: 60px;, it has no effect whatsoever.
How do I get a div to expand with the width of a viewport, maintain its aspect ratio, and stop expanding both height and width at a specified maximum width?
Live code here.
body {
width: 36%;
margin: 8px auto;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
max-width: 300px;
background: blue;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
It looks like the issue is because of the padding which increases the height by % based on resize
below is the example in which i have added box-sizing:border-box; and gave height which on resize remains the same
http://dabblet.com/gist/85df841bd1602d24829f
One possible solution seems to be to simply create a containing div around the wrapper div, and apply max-width to that.
http://jsbin.com/huzem/1/edit?html,css,output
In the above site how do i extend the border to the bottom of the page, compared to where it ends now(right at the edge of the content)? Also is there a way to make the border line up on the edge of the right and left sides of the screen without using negative values for margin such as i did by setting margin -right and margin-left to -4%?
You are setting the width to 93%, and then you are overriding that with your -4% thing - so, just don't do the first part. body has a margin of something by default: so get rid of that:
Put a border on your html and body, like - red. and look at what is actually going on. The body only stretches to fit your content... so you need to tell it how big it can be... (100%) then you have to tell the things inside what to do etc... This isn't the complete / perfect answer --- but it should get you closer to your goal.
html, body {
height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}
body{
margin: 0; /* remove default margin */
color: white;
background-color: black; /* white on white is no helpful */
}
#main{
height: 100%;
}
#content{
border: solid white; /* you need a px value */
min-height: 100%;
}
a {
color:white; /* you don't need to specify for every state */
}
I suggest you to set the main div at the height of the window and set a height property to 100% to your content div like this :
#main {
width: 93%;
margin: -2% auto 0% auto;
position: absolute;
top: 0;
bottom: 0;
}
#content {
border: solid white;
margin: 0% -4% 1000% -4%;
height: 100%;
}
The border will now extend to the bottom of the page!
I have found the following from the site: http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-
"The CSS3 code for this is very simple. You just need to add the following property to switch the model for a particular element.
#W3C-model {
box-sizing: content-box;
}
#traditional-model {
box-sizing: border-box;
}
Having understood how box-sizing works, the next question is where can you use it? Well, its very useful when you have two equal columns. If you give them 50% width each and add some padding and maybe a border, the columns won't show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes."
I am not sure what is meant by the columns won't show up side by side? It sounds like what is expected here is the dividing border between the two columns would vanish or something like that - I am not sure. I have this sample code to experiment with:
http://jsfiddle.net/hE8UZ/
I am not seeing any effect at all. Besides not sure why the span elements didn't occupy 250px as width was mentioned as 50% of body.
Please help.
Thanks
If you have any container with 500px width and child with 1px border, 10px padding, 100% width and set box-sizing to border-box then the width will be 500px if you set box-sizing to content box then the width will be 500px + 2x10px + 2x1px = 522px.
.container {
display: block;
width: 500px;
}
.one {
display: block;
padding: 10px;
-webkit-box-sizing: border-box;
width: 50%;
border: 1px solid;
}
.two {
display: block;
padding: 10px;
-webkit-box-sizing: content-box;
width: 50%;
border: 1px solid;
}
http://jsfiddle.net/Vaj5x/
EDIT:
If you wanna have tow columns add them float to left. Like here http://codepen.io/Chovanec/pen/cuBpg