some times in wrapped by width div needs to set for an element background to full width, so I set it in an pseudo element, but descktop browser, when page is long height adds 16px for vertical scrooll bar to viewport, so I calculate it
by calc (see below).
Here is Example
HTML:
<div class="wrapped">
<h1>100vw background in wrapped</h1>
<div class="fullbg">
some body text, images, etc here
</div>
</div>
CSS
html, body { margin: 0; padding: 0; }
body { height: 100%; width: 100%; }
div { position: relative; }
*,*:before,*:after { box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.wrapped {
width: 70%;
margin: 0 auto;
height: 150vh; /* simulate long heigh */
}
.fullbg {
height: 5em;
/* some styles here*/
}
.fullbg:before {
content: "";
bottom: 0;
display: block;
background: rgba(85, 144, 169, 0.7);
position: absolute;
width: 100vw;
right: 50%;
margin-right: -50vw; /* work for short page or mobile browser*/
margin-right: calc( -50vw + 8px ); /* work for desctop long page */
top: 0;
z-index: -1;
}
I looked answer at
Prevent 100vw from creating horizontal scroll
Difference between Width:100% and width:100vw?
and others questions,
but do not find real true universal css solution for this
as a temporary solution may be an js, like this:
var scrollbarWidth = ($(document).width() - window.innerWidth);
but I think it not the best solution, and now I not figured out how to use it with a pseudo considering that to scroll width can vary.
ps. no one overflow: hidden!
The scrollbar can be targeted specifically.
Check this out for the fix in chrome and safari
http://codepen.io/anon/pen/dXgmbZ
Key CSS:
.element::-webkit-scrollbar {
width: 0 !important;
}`
The codepen is just your example with the chrome fix. If you'd like to see a more robust solution, check out this JSFiddle:
http://jsfiddle.net/E78q3/
The idea behind this is just clipping out the scroll bar with absolute positioning and hiding container/wrapper overflow. Simple, clever, yet effective.
Further Reading:
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
Related
The contents of my website are not displayed correctly. I have already tried in my css file, but without success.
Here is an excerpt from my styles.css.
Thanks for the help
* {
padding: 0;
margin: 0;
}
/* Body */
body {
position: relative;
margin: 30px 0 100px;
padding-top: 30px;
min-height: 100%;
height: 100%;
}
.navbar-fixed-top {
margin-top: 30px;
}
Have you tried doing it this way:
html {
height: 100%;
}
body {
min-height: 100%;
}
It should work, if I understood what you are trying to do.
If i iunderstand correct when you scroll down to the bottom of the page the footer is covering part of the content. So what you need to do is either with jquery get the height of footer and apply it as margin-botton to the content... or set max-height to footer and set that max-height value as margin botton to the content
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
DEMO
Sometimes I'll create a square (or any rectangle, really) that will respect its ratio at any size using a method similar to this method.
What I want:
to prevent the square extending outside of the viewport on devices with a small height
i.e. mobile phone in landscape
Proposed solution
limit width of square to a percentage of viewport height using max-width: 90vh
expect ratio to be respected
CSS
.square {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.square-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mw { max-width: 90vh;} /* solution, but makes things break */
HTML
<div class="square mw">
<div class="square-inner"></div>
</div>
What should happen
in viewports with small heights, the square should be a max width of 90% of the viewport height
What actually happens:
when viewport height is less than width of square:
width is constrained as per vh value
height is calculated from width of square had it not been constrained to vh
we get a vertically long rectangle
The spec says that the relative value is calculated from the 'containing block', which to me seems as though it should be the current width of the container.
Browser behaviour:
Chrome 29.0.1547.65: as described
Firefox 23.01: as described
Opera: does not respect vh at all Not validated with Opera 16+
Am I interpreting the spec incorrectly, or is this a possible bug in implementation by browser vendors?
The problem is in using both lengths in % and vh.
Try this:
Working Example
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
font-weight: 100;
}
.neat {
width: 50%;
max-width: 600px;
min-width: 320px;
margin: 0 auto;
}
.col {
float: left;
padding: 2rem;
width: 90vh; /*** Important bit changed width:50%; to width:90vh; ***/
max-width: 50%; /*** Important bit added max-width:50%; ***/
}
.square {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.square-inner {
position: absolute;
background-color: #333333;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
}
.mw {
max-width: 90vh;
}
I don't think Opera supports vh,and there are known issues. I'm wondering if this bug is affecting what you're seeing: http://code.google.com/p/chromium/issues/detail?id=124331.
I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.
The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.
This is basically it: http://imgur.com/TNaTU
So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.
Is there a way to do this without Javascript?
This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
I will have a look at making this work in IE7 if it's a requirement for you.
Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.
Live Demo (edit)
HTML:
<div id="top">top stretch</div>
<div id="middle">
<div id="middleContainer">
<div class="stretch">left stretch</div>
<div id="fixed">fixed</div>
<div class="stretch">right stretch</div>
</div>
</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top, #bottom {
position: absolute;
left: 0;
right: 0;
text-align: center
}
#top {
top: 0;
height: 50%
}
#bottom {
bottom: 0;
height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
position: absolute;
right: 0; bottom: 0; left: 0
}
#fixed {
width: 400px
}
#middle {
background: #ee1c24;
position: absolute;
width: 100%;
height: 300px;
top: 50%;
margin-top: -150px; /* height/2 */
left: 0;
z-index: 1
}
#middleContainer {
display: table;
width: 100%;
height: 100%
}
.stretch, #fixed {
display: table-cell
}
/* just for demo */
#top, #bottom, .stretch {
background: #b5e61d;
border: 5px solid #000
}
#fixed {
border-top: 5px solid #000;
border-bottom: 5px solid #000
}
Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.
A pure css solution
Requiring one extra wrapper (tested in FireFox, IE8, IE7):
Improved Answer
There was a problem with the original answer (below). If the image is larger than the container that outer is centered on with it's auto margins, then it truncates the image on the left and creates excessive space on the right, as this fiddle shows.
We can resolve that by floating inner right and then centering from the right. This still truncates the img off the page to the left, but it does so by explicitly pushing it that way and then centers back off of that, the combination of which is what prevents the extra horizontal scroll on the right. Now we only get as much right scroll as we need in order to see the right part of the image.
Fiddle Example (Borders in fiddle are for demo only.)
Essential CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
position:relative;
float: right; /* this was added and display removed */
right: 50%;
}
div.inner img {
position: relative;
right:-50%; /* this was changed from "left" in original */
}
If you desire no right scroll at all for wide images
Then using the above, also set whatever element wraps outer (like body or a third wrapper) to have overflow: hidden.
Original Idea (for History)
Fiddle Example (Borders in fiddle are for demo only.)
HTML
<div class="outer">
<div class="inner">
<img src="/yourimage.png">
</div>
</div>
CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
display: inline-block;
position:relative;
right: -50%;
}
div.inner img {
position: relative;
left:-50%;
}
Here's a 2 line CSS solution (a couple more lines might be required for cross-browser support):
img {
margin-left: 50%;
transform: translateX(-50%);
}
HTML
<div class="image-container">
<img src="http://www.google.com/images/logo.gif" height="100" />
</div>
CSS
.image-container {
width: 150px;
border: solid 1px red;
margin:100px;
}
.image-container img {
border: solid 1px green;
}
jQuery
$(".image-container>img").each(function(i, img) {
$(img).css({
position: "relative",
left: ($(img).parent().width() - $(img).width()) / 2
});
});
See it on jsFiddle: http://jsfiddle.net/4eYX9/30/
Alternative pure CSS solution is to use transform attribute:
HTML:
<div class="outer">
<img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
CSS:
.outer {
position: relative;
width: 100px;
border: 1px solid black;
height: 150px;
margin-left: 100px; /* for demo */
/* overflow: hidden; */
}
img.image {
width: 200px;
opacity: 0.7;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
Fiddle
Just to add a overflow:hidden to parent div to hide the extra area of the image.
Your best bet is to set it as background image of the container instead.
#container {
background: url('url/to/image.gif') no-repeat center top;
}
In fact there is a simpler pure css/html way (without large horizontal scroll) :
Html :
<div class="outer">
<img src="/my/sample/image.jpg">
</div>
Css :
If you don't want to see image overflow
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: hidden;
position: relative;
height: 200px;
}
With image overflow visible
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: visible;
position: relative;
height: 200px;
}
body, html {
overflow-x:hidden;
}
A background solution with image overflow visible :
Html :
<div class="outer">
<div class="inner"></div>
</div>
Css :
div.outer {
width: 100%;
height: 200px;
}
div.inner {
background: url('/assets/layout/bg.jpg') center no-repeat;
position: absolute;
left: 0;
width: 100%;
height: inherit;
}
assuming outer is in a width specified container.
I see this is an old post, so maybe everybody knows this by now, but I needed help for this and I solved it using flex:
.parent {
display: flex;
/* give it the width and height you like */
}
.parent img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:
jQuery
$(document).ready(function(){
var theImg = $('#container img');
var theContainer = $('#container');
if(theImg.width() > theContainer.width()){
theImg.css({
position: 'relative',
left: (theContainer.width() - theImg.width()) / 2
})
}
})
I found this to be a more elegant solution, without flex, similar to something above, but more generalized (applies on both vertical and horizontal):
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.