I have a situation where I have a 'bottom' content div within a general container. This div should stay at the bottom (with absolute positioning), but have a percentage gap to base of the container. The percentage should be relative to the width of the container.
We can't use 'bottom:5%' because as the position props define this is relative to the height. How about margin? Yes! It works in Chrome .. and Firefox. Ah, but not in Safari. It seems Chrome and Safari calculate it based on the container width and Safari on the container height.
See this fiddle in Chrome and Safari and you'll see the inconsistency. CSS styles:
.container {
background: #990000;
width: 345px;
height: 200px;
position: relative;
}
.bottom {
background: #000;
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
margin-bottom: 5%;
}
Anybody know where the bug lies here - with Safari? Chrome/Firefox? The spec?
A quick check shows that padding might work consistently, but it's not ideal for those who would want to use margin (i.e. when a background comes into play).
The problem lies with Safari. W3C Standards state that margins that are defined using percentages should be calculated with respect to the width of the containing block (not the height).
Check it: http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties
So basically, you're stuck with the bug. However, I'd suggest using some JS to target Safari, get the width of the container and apply a margin as a percentage of that width.
For example:
var width = $('.container').width(); // get the width of div.container
var bottomMargin = width * 0.05; // multiply the width by 0.05 to get 5% of the container width
// look to see if the browser is Safari
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
$('.bottom').css('margin-bottom', bottomMargin+'px'); // apply our margin to div.bottom
}
else {
};;
I had some trouble implementing this in JS Fiddle so have created a page here.
Hope that helps!
I had the same problem with Android Browsers and was able to solve it by putting the margin on a child element.
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
.bottom-child {
height:100%;
margin-bottom: 5%;
background: #000;
}
The key is not to put the margin on the absolutely positioned element.
Related
If an element is set to width: 100vw; and there is a vertical scrollbar the width of the element will be equal to the viewport plus the width of the scrollbar.
Is it possible to prevent this?
Is it possible to prevent this without disabling horizontal scrolling on the entire page? Aside from changing my css/markup to make the element 100% of the body width I can't think of anything.
Tested in Chrome Version 43.0.2357.81 m & FF 36.0.1 & Opera 20.0.1387.91 on Windows 8.1
Here is the code as requested:
Example
html
<div class="parent">
<div class="box"></div>
</div>
<div class="tall"></div>
css
body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit;
position: relative;
}
.parent {
background: rgba(0, 0, 0, .4);
height: 100px;
width: 5rem;
margin-bottom: 25px;
}
.box {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .4);
height: 50px;
width: 100vw;
}
.tall {
height: 100rem;
}
Basically the answer is no, if you have a vertical scrollbar there is no way to make 100vw equal the width of the visible viewport. Here are the solutions that I have found for this issue.
warning: I have not tested these solutions for browser support
tl;dr
If you need an element to be 100% width of the visible viewport(viewport minus scrollbar) you will need to set it to 100% of the body. You can't do it with vw units if there is a vertical scrollbar.
1. Set all ancestor elements to position static
If you make sure that all of .box's ancestors are set to position: static; then set .box to width: 100%; so it will be 100% of the body's width. This is not always possible though. Sometimes you need one of the ancestors to be position: absolute; or position: relative;.
Example
2. Move the element outside of non-static ancestors
If you can't set the ancestor elements to position: static; you will need to move .box outside of them. This will allow you to set the element to 100% of the body width.
Example
3. Remove Vertical Scrollbar
If you don't need vertical scrolling you can just remove the vertical scrollbar by setting the <html> element to overflow-y: hidden;.
Example
4. Remove Horizontal Scrollbar
This does not fix the problem, but may be suitable for some situations.
Setting the <html> element to overflow-y: scroll; overflow-x: hidden; will prevent the horizontal scrollbar from appearing, but the 100vw element will still overflow.
Example
Viewport-Percentage Lengths Spec
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
It appears that there is a bug because vw units should only include the scrollbar width when overflow is set to auto on the root element. But I've tried setting the root element to overflow: scroll; and it did not change.
Example
This is a more full-fledged approach to the bug since it still exists in modern browsers. Setting overflow-x: hidden can cause problems or be undesirable in many situations.
A full example is available here: http://codepen.io/bassplayer7/pen/egZKpm
My approach was to determine the width of the scroll bar and use calc() to reduce the 100vw by the amount of the scroll bar. This is a little more complicated because in my case, I was pulling the width of the content out from a box that had a defined with so I needed to declare the margin as well.
A few notes regarding the code below: first, I noticed that 20px seems to be a rather broad magic number for the scroll bars. I use a SCSS variable (it doesn't have to be SCSS) and code outside of #supports as a fallback.
Also, this does not guarantee that there will never be scroll bars. Since it requires Javascript, users that don't have that enabled will see horizontal scroll bars. You could work around that by setting overflow-x: hidden and then adding a class to override it when Javascript runs.
Full SCSS Code:
$scroll-bar: 20px;
:root {
--scroll-bar: 8px;
}
.screen-width {
width: 100vw;
margin: 0 calc(-50vw + 50%);
.has-scrollbar & {
width: calc(100vw - #{$scroll-bar});
margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
}
#supports (color: var(--scroll-bar)) {
.has-scrollbar & {
width: calc(100vw - var(--scroll-bar));
margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
}
}
}
Convert the above to plain CSS just by removing #{$scroll-bar} references and replacing with the px value
Then this Javascript will set the CSS Custom Property:
function handleWindow() {
var body = document.querySelector('body');
if (window.innerWidth > body.clientWidth + 5) {
body.classList.add('has-scrollbar');
body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
} else {
body.classList.remove('has-scrollbar');
}
}
handleWindow();
As a side note, Mac users can test this by going to System Preferences -> General -> Show Scroll Bars = Always
Using max-width attribute with width:100vw and it solved my problem.
Here's what i used.
.full{
height: 100vh;
width: 100vw;
max-width: 100%;
}
Basically what it does is it fixes the max width to the viewport so the horizontal scroll gets eliminated.
More # https://www.w3schools.com/cssref/pr_dim_max-width.asp
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically
change the height of the element.
If the content is smaller than the maximum width, the max-width
property has no effect.
Paddings and borders can interfere. So can margin. Use box-sizing to calculate width including these attributes. And maybe remove margin (if any) from the width.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0; /* interferes with 100vw */
}
.parent {
width: 100vw;
max-width: 100%; /* see below */
}
.box {
width: 100%; /* For those good old-fashioned browsers with no vw or calc() support */
width: -webkit-calc(100vw - [your horizontal margin, if any]);
width: -moz-calc(100vw - [your horizontal margin, if any]);
width: calc(100vw - [your horizontal margin, if any]);
max-width: 100%
}
It seems you have to add max-width: 100%; if there is a reflow which is causing the scrollbar to appear after the initial viewport width calculation. This does not seem to happen in browsers without an interfering scrollbar (iOS, OS X, IE 11 Metro), but can affect all other browsers.
I was also struggling with this, and I also thought of CSS variables as the solution. CSS variables aren't supported in IE11 though so I tried something else:
I fixed it by calculating the width of the scroll bar: subtracting the width of the body (not including scroll bar) from the width of the window (including the scroll bar). I use this to add it to the 100% of the body, see plusScrollBar variable.
JS:
// calculate width of scrollbar and add it as inline-style to the body
var checkScrollBars = function() {
var b = $('body');
var normalw = 0;
var scrollw = 0;
normalw = window.innerWidth;
scrollw = normalw - b.width();
var plusScrollBar = 'calc(' + '100% + ' + scrollw + 'px)'
document.querySelector('body').style.minWidth = plusScrollBar;
}();
CSS:
html{
overflow-x: hidden;
}
Why I like this: it takes in consideration that not all scrollbars are the same width or considered as conserved space at all. :)
I had the same issue and it was fixed when I added:
html, body { overflow-y: auto; }
I added the comment:
/* this fixes a 100vw issue, removing the horizontal scrollbar when it's unneeded */
It works at least with Firefox, Chrome, Opera and Internet Explorer 11 (I used browserling for IE).
I don't know why it works and if it works in all cases, though.
EDIT:
The horizontal scrollbar disappeared, but I noticed it's still horizontally scrollable using the cursor keys and touch screens...
overflow-x: clip; does the job.
I had the same problem. When I changed the vw units to percentage, horizontal scrollbar disappeared.
If you're working in a framework (ASP.NET for example) where there's possibly a parent element wrapping around the html, then setting the html's max-width to 100% will solve the problem without using the "band-aid" solution overflow-x: hidden.
html {
max-width: 100%;
}
An element with width: 100vw only causes horizontal scrollbars when one of it's parents has a horizontal padding. Otherwise it should fit in well.
Check this fiddle: http://jsfiddle.net/1jh1cybc/ The .parent2 has a padding, which causes the inner .box to break out of it's parent width.
Edit:
In your case I guess your body has a margin. Check this fiddle out with you code and try to remove the body css rule: http://jsfiddle.net/1jh1cybc/1/
Here's what I do:
div.screenwidth{
width:100%; /* fallback for browsers that don't understand vw or calc */
width: calc(100vw - 17px); /* -17 because vw is calculated without the scrollbar being considered & 17px is width of scrollbars */
position:relative; /* use this if the parent div isn't flush left */
right: calc((100vw - 17px - 100% )/2);
}
I fixed this on my site by adding body{overflow-x:hidden} to the page in question.
Works on your example too.
Here's my solution to the problem of 100vw adding a horizontal scroll:
html {
width: calc(100% + calc(100vw - 100%));
overflow-x: hidden;
}
.box {
width: calc(100% + calc(100vw - 100%));
}
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
We use the percentage trick on paddings to keep aspect ratio to a div when the user scales his window. Like this:
.div {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 20%;
}
Now we would like to be able to set a maximum height to this div. Because the height of the div is determined by the padding on the div we would need the div to be border-boxed. So far so good. When trying to use a min-height on the div, this works. The max-height on this div however does not work for some reason.
.div {
max-height: 60px;
}
I created a fiddle to show you what i mean: http://jsfiddle.net/UxuEB/3/.
Tested this on Chrome, FF and IE. Can somebody tell me what I'm doing wrong or why this doesn't work as expected?
I realize this answer comes incredibly late to the party but I was trying to solve this exact same thing today and this question is the first result in Google. I ended up solving it with the below code so hopefully that will help someone out in the future.
First, add an extra inner div:
<div class="control control-max-height">
<div class="control-max-height-inner">
Max-height
</div>
</div>
And set the padding on that while hiding the overflow on the outer div:
.control {
background: red;
width: 80%;
margin: 0 auto 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.control-max-height {
max-height: 120px;
overflow: hidden;
}
.control-max-height-inner {
padding-bottom: 20%;
}
This obviously assumes you're fine with hiding part of the inner element when it overflows. In my case that wasn't a problem because the inner element is just an empty link element to make the whole thing clickable and the outer element just has a centered background image and a border set.
See fiddle: http://jsfiddle.net/UxuEB/7/
The property max-height works on the height of the element and you want to use it on the height and padding-bottom.
I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.
An example:
The element with content is 100px in height.
The max-height is set to 50px (element is now 50px in height).
Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.
JsFiddle example: clicky
Extending from Mike's answer, the same can be achieved with a single DOM element & a pseudo element, eg.
html:
<div class="le-div"></div>
css:
div.le-div {
max-height: 200px;
/* 👇 only necessary if applying any styles to the pseudo element
other than padding:
overflow: hidden;
*/
}
div.le-div::before {
content: '';
display: block;
padding-bottom: 60%;
}
Min-height property defines the height when height is solely dependent on padding only but max-height does not.
Not sure why but now in 2020, min and max css units does nice job as we need.
.classthatshoulddefineheight {
padding-bottom: min(20%, 60px);
}
So when 20% becomes greater than 60px then it will be limited to 60px (minimum of them).
The limitation to Mike's answer (and this Brad's answer - although Brad's technique can be incorporated to reduce the number of levels of containers) is that it requires overflow: hidden - which in my use-case (and in many others) a significant limitation.
I've reworked his example to work without overflow: hidden; using an additional level and absolute positioning.
http://jsfiddle.net/2ksh56cr/2/
The trick is to add another container inside the inner box, make it absolute positioned and then add the max-height to that container as well:
.inner-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 120px;
}
As long as your fine with having some additional DOM-elements, this should work in all scenarios for more or less all browsers.
Try display: flow-root; on the parent container.
Currently I'm working on a website for myself. I decided to go for a header content footer design where the footer shall be stuck to the bottom all the time. Hence I set up a wrapper with position: relative, containing the header (#top), content (#middle), and footer (#bottom). Bottom got position: absolute with top: 0.
I've also set height: 100% for html and body and a appropriate padding-bottom for #middle to ensure that my footer won't overlap #middle.
Please find a simplified sample version here: http://www.webdevout.net/test?0w
Here is the CSS in question:
* {
padding: 0;
margin: 0;
}
html, body {height: 100%}
#wrapper {
position: relative;
background-color: #ccc;
min-height: 100%;
}
#middle {
background-color: #900;
padding-bottom: 200px;
}
#top, #bottom {
width: 100%;
height: 200px;
background-color: #bb5;
}
#bottom {position: absolute; bottom: 0;}
Now here's my problem: my understanding of the box-model is, that one should be able to achieve the same (keeping the space for the footer) with margin-bottom instead of padding-bottom for #middle, but margin-bottom isn't applied to it. I've read that min-height doesn't consider padding, border or margin, but the padding is considered here while border and margin aren't.
FF and Chrome show different behaviors when margin-bottom is used instead of padding-bottom for #middle: while Chrome just ignores the margin, FF applies it below #wrapper. My general idea would have been that my container should grow to the total size of its content with min-height, including height + padding + border + margin of #middle, but obviously it just grows to overall size of #top + height of #middle + padding of #middle.
I wonder what is the correct behavior and why padding and margin aren't interchangeable to keep the space for the footer.
While an explanation would be much appreciated, I'd be also thankful for a link to a source which could help me. I'm sorry if this duplicates another post, but I didn't find something (neither here nor via Google) fitting my special problem.
Thank you!
i had faced same problem like u are facing.
You have to use this piece of code.
#middle {
display: table;
margin: 2% auto;
width: 100%;
}
use of display : table works for me to set margin from top and bottom.
Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed)
Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(
<div id="parent">
<div id="child1"></div>
</div>
#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }
That's easy. The trick is setting top: 0px and bottom: 0px at the same time
Here's the working code
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: block;
background-color: #ff0;
border: 1px solid #f00;
position: relative;
width: 200px;
height: 100%;
}
#child1 {
background-color: #f00;
display: block;
border: 1px solid #ff0;
position: absolute;
left: 200px;
top: 0px;
bottom: 0px;
}
Check out a working example here http://jsfiddle.net/Qexhh/
If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:
Don't worry about supporting IE6 as it is a dead browser anyway
If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
fake it by setting the backgrounds to be the same colour so no-one notices the difference
You can achieve this with setting both the top and bottom attributes of the child.
See how this is done
At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!
Dean Edwars' IE7 and 8 JS libraries
As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.
I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.
In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.
Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:
jQuery(function(){
var rightColHeight = jQuery('div.right_column').height();
var leftColHeight = jQuery('div.left_column').height();
if (rightColHeight > leftColHeight){
jQuery('.content_wrap').height(rightColHeight+'px');
}
});