I've set my html body tag heigth to be 100% but in Firefox that shows as a few more pixels than the screen has, so a nav scroll bar appears. How can I adjust that other than specifiying an arbitrary height :98%? I've set padding and margin to zero.
I'm using only bootstrap for css, if that's of any importance.
Check elements inside the body. One of it probably has margins or even content goes outside the body element. Just try to delete all inner elements one by one in Firefox's dev.tools and notice what element deletion will solve the problem.
Just to follow up the answer above, I noticed that padding can cause the same effect, but can only be noticed when inspecting the elements.
<button class="sbtn">
<span class="text">
my btn
</span>
</button>
.sbtn {
height: 5vh;
background-color: red;
}
.text {
padding: 10vh;
color: white;
}
Try adding this to your main CSS file.
/* CSS */
* {
box-sizing: border-box;
}
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
CSS box sizing
Related
I'm getting strange behaviour from margins. A vertical scrollbar appears even though I'm no where near the bottom. I assume this is the desired behaviour, considering that I tested this and got the same results in the latest versions of Chrome, IE11 and Firefox.
The following code results in a scrollbar
<html>
<head>
<style>
body {
margin: 0;
height: 100%;
padding: 1px;
}
div {
margin: 15px;
}
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>
Changing the body's padding to 0.1px results in no margin.
Changing the body's padding to 0px also results in a margin.
Also, adding box-sizing: border-box to the body removes the scrollbar as long as the padding is not zero.
I haven't added a Fiddle because I can't replicate it there. You need to test this in a simple html file.
Is this actually the expected behaviour? Is there a logical explanation why they implemented it like this?
Looks like the reason you're seeing the scrollbar is a combination of defining a height and setting a padding value. The height property dictates the height of an element's content, excluding the margin and padding added onto that value. The scrollbar appears after adding padding because you've set the content of the element's height to 100% of the page, plus the padding, causing the element's entire height to overflow.
Additionally, applying box-sizing to an element makes the height and width properties include padding in the value. Funny thing is, it doesn't include margin. So if you were to apply:
body {
box-sizing: border-box,
margin: 1px,
padding: 0
}
You'd still see the scrollbar. Once understanding that an element's height property, by default, only dictates the height of the content within the element, it makes a little more sense.
Hope this helps :)
Setting the height of the body to 100% makes it take all of the height of it's parent element which is the html element. The html element's width and height in turn are governed by the window it is in. Adding a margin or a border would increase the dimensions beyond the available space thus inducing the scroll.
However, the other issue is that adding the margin to the div is pushing the body down by 15px. This has to do with collapsing margins.
Check out https://stackoverflow.com/a/2680515/6184852 for further information.
I am trying to create an audio player, with playbutton, progress bar, and stop button. I want it to be fixed to the bottom of the page.
So to do this I have the following CSS:
.player-container {
height: 100px;
background-color: #505050;
position: fixed;
bottom: 0;
width: inherit;
}
Now, the weird thing, is what happens to the width. The player container is contained in a Bootstrap container. It usually starts in the correct place, but depending on the width of the browser, it seems to bunch up all small - or it seems to be the normal length, plus the size of the padding, which is really odd.
Here is the HTML:
<div class="container">
<div class="test"></div>
<div class="player-container" ng-show="showPlayer" ng-controller="PlayerController">
<span class="glyphicon glyphicon-play music-control"></span>
<div class="seekBase" seek-track></div>
<span class="glyphicon glyphicon-stop music-control" stop-music ng-click="stopClicked()"></span>
</div>
</div>
I've created a plnkr to display what is happening, with different color backgrounds to make it all very clear:
http://plnkr.co/edit/MU4aK6Wf4UUmQh4egqU7
Is the 'position: fixed' causing all this to go crazy? Ideas on a postcard....
The inherit keyword sets the specified and computed values to the computed value of the same property on the parent element.
The problem is that bootstrap may set some width to the parent .container depending on the width of the browser (by using min-width #media queries).
When the browser is narrow, the parent .container has no cascaded value for width. Therefore, sincewidth is not an inherited property, the specified value is auto. For width, auto computes to auto. Then, inherit makes .player-container have an auto width too.So width: inherit does not affect .player-container in this case.
If you want this behavior when the browser is not narrow, remove width: inherit and let it be auto.
However, when the browser is wider, .container may have widths like 750px, 970px or 1170px. In this case, .player-container will inherit that same width.
If you want this behavior when the browser is narrow, use width: 100%.
I have the following html:
<style>
body {
margin: 0;
height: 100vh;
}
div {
margin: 1px;
}
</style>
<body>
<div>feck</div>
</body>
The div's margin causes scroll bars, even tho the div itself is nowhere near the height of the page. Without the div's margin, there is no scroll bar. What's going on? Is this a browser bug?
Collapsing margins. Because the div is the topmost element in the body, the div's margin is collapsed with the body's margin. That is, the body gets the same margin too.
You may think that "collapsing" isn't the right word for this behaviour, and you'd be right, but that's the word they've chosen. Sorry.
There are several solutions:
Sean's solution of simply moving the div a pixel downwards
Your own solution of using calc for the body height
Set a padding on the body, and use box-sizing:border-box for it.
Because a div is a block element. It has positioning in the Dom, therefore takes up space. When you add a margin to the top, you are pushing its space down, therefore increasing the overall amount of space it occupies.
If you want to push the div down, without changing the overall container (body) height, you can give the div a position of relative, and a top of 1px.
div {
position: relative;
top: 1px;
}
Check out this answer it should be clear enough.
The main point is that margins of adjacent elements (in this case your div and body) are collapsing taking the maximum value of the two margins.
Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?
Here is the code
HTML
<header>
this is a header
</header>
<div class="container">
this is a container
</div>
CSS
header {
width: 90%;
height: 100px;
background: blue;
position: fixed;
z-index: 100;
}
.container {
width: 90%;
height: 500px;
background: red;
position: relative;
z-index: -2;
}
Here is a link to the codepen http://codepen.io/colbydodson/pen/wcgua
Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.
The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),
header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset.
To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit
.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)
Unwanted result:
logically header will be 20px wider than .container because position fixed moves your element out of body flow.
Fix:
control your parent (body) element default margin by setting to 0
body { margin: 0; }
Or a small but heavy CSS reset like:
/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
Read also CSS Box Model - Margin collapsing
I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.
If you're willing to not support IE8 and below, you can use
width: 100vw
Can I use Viewport units: vw, vh, vmin, vmax
The accepted answer is fine but in my case, I was seeing a fixed header that was wider than the rest of the page only on a mobile device. It happened to be caused by some element in the footer that had a width in pixels wider (width: 750px in my case) than the viewport of the browser.
If you want to know if some element on your page is causing this problem for you? Just open your browser console and remove some elements further down. At some point, you may notice the header becoming the correct width again. Chances are that the element you just removed or some element in it has a width in pixels wider than the viewport of the browser.
The solution, in that case, is to either set that element to a lesser width or make it flexible.
By default the body tag have margin.
Try this in your stylesheet:
body{
margin: 0;
}
As Salaw mentioned, using body { margin: 0; } will solve the issue, since <body> has default margin/padding (depending on the browser). position: fixed; removes an element completely from the flow of the document and makes it relative only to the viewport, while position: relative; does not.
Given this fact, and given that width: 90% means "make this element take up 90% of parent element's available space", and given that the parent of a fixed element is the viewport while the parent of this relative element is the body with its margin, you have the discrepancy in sizes.
See http://codepen.io/anon/pen/exzpC
Because position:fixed behave as the element is detached from document, and placed in the nearest top/left corner of the document, adding default body's margin. That's why it will take the same amount of space, as your second div, if you reset body margin.
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.