I have this code:
body
{
margin: 0;
overflow-y: scroll;
}
.cont
{
width: 100vw;
height: 100vh;
background-color: #000;
}
<div class="cont"></div>
<br>
Chrome (and other browsers with the same engine) ignore the width of vertical scrollbar.
How I can fix it?
Thanks!
Because the vw/vh unit takes into account the size of the entire viewport when sizing and does not take into account the width of the scroll bar. A simple fix is to limit the max-width of the .cont element to not exceed the width of the document.
.cont
{
width: 100vw;
height: 100vh;
background-color: #000;
max-width: 100%; /*limit width*/
}
Related
I have a section that i want to scale using aspect ratio, but also keep it at a maximum and minimum height. Somehow the max-height property doesn't apply to this, meanwhile the min-width works just fine.
div {
background: green;
border-bottom: 2px solid red;
padding-top: 60%;
max-height: 100vh;
min-height: 450px;
box-sizing: border-box;
}
<div></div>
What i'm trying to achieve is to display content that has a fixed aspect ratio, it scales down until reaches a minimum height, but also won't exceed the viewport height when displayed in a wider browser. See attached image for explanation:
Any ideas?
Ok, if I understand correctly, you'd need to do have the height of the box linked to the width at a percentage (which I'd do by setting the height to viewport width units rather than viewport height - in my example I've set it to 75%). That way the box stays in pro when it's not being constrained by max-height or min-height.
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #00ff00;
}
.box {
width: 100%;
height: 75vw;
max-height: 100vh;
min-height: 400px;
background-color: #ff0000;
}
I have a fixed-width tape images. Horizontal well displayed (the width of the tape), but the vertical do not fit on the entire screen.
Look at here http://didi.url.ph/design (click first block with cat) :)
Now I have:
#ajaxcontent .field-item img {
height: auto;
width: 100%;
}
How to make:
the maximum width of the image - the width of the tape,
the maximum height - the height of the screen.
so should be
It does not work:
#ajaxcontent .field-item img {
max-width: 100%;
max-height: 80vh;
}
Because the image is stretched disproportionately.
Are there any ideas?
You can do this:
CSS
#ajaxcontent {
background: #ffffff none repeat scroll 0 0;
height: 90vh;
margin: 40px auto;
overflow: auto;
position: relative;
}
I'd like to know if it's possible to make a div responsive and at the same time make its content scrollable within certain dimensions (max/min height).
Here is my attempt
http://codepen.io/anon/pen/rVEbWG
While the width is responsive the height remains the same (while I would like it to be 100px min and 400px max).
.wrapper {
overflow: auto;
max-height: 400px;
width: 50%;
}
.content {
overflow-y: auto;
}
Simple, just use the vh css unit for the height, like so: height: 100vh
.wrapper {
overflow: auto;
height: 100vh;
width: 50%;
border: 1px solid red;
}
.content {
overflow-y: auto;
}
The 1 vh unit is relative to 1% of the height of the viewport, meaning that your div will be dependent on the height of your viewport.
If your viewport will be smaller than the div, you will be able to scroll trough it.
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter
I have a page with a variable-height header, content area, and footer. I want the content area to always fill the viewport, and grow vertically to fit content as necessary. I've found lots of examples of doing this with fixed-height headers, but none where the height is unknown.
Any solution needs to work in IE 6, 7 and 8, Firefox 3.x and Safari 4. Can this be done with pure CSS? Do I have to give in and resort to table-based layout?
EDIT:
An additional requirement is that I can place elements inside the content area and get them to expand to the full height of the content area (be it viewport height - header height - footer height or larger than that). Some of the content we want to display has "header" and "footer" sections of their own, so what I'm really looking for is a nestable solution.
Ok so the min-height CSS property doesn't work :)
I played around with an actual HTML file now and I believe I found a way.
.header-footer
{
height: 10%;
background-color: lightYellow;
display: table;
width: 100%;
}
.container
{
margin-left: auto;
margin-right: auto;
height: 80%;
width: 100%;
display: table;
}
.inner
{
background-color: lightPink;
height: 100%;
}
We use the display: table property to make sure each <div> sits nicely under and over the other ones.
NOTE: You have to set a height property for each of the elements on the page. It doesn't have to be as large as 10% that I chose, but at least something. Once the content is inserted into the element that is larger than the height value it should expand.
I've created two seperate HTML pages for you to examine to see if this suits you:
Content not larger than the viewport
Content larger than viewport
Hopefully this is what you're looking for.
Thanks
if you want the header to change size, use a relative height. The content will already fill the viewport vertically.
You can try using the min-height CSS property on the header, content and footer.
e.g.
.header-footer
{
min-height: 20%;
}
.content
{
min-height: 80%;
}
Make sure that you set both <html> and <body> tags to have a min-height: 100% that way you can fill up the entire viewport.
This should allow for the page to expand as needed but stay at a minimum of 100%.
Thanks
I spent a day experimenting with this option and hit so many odd dead-ends that my professional advice is now this:
You designed it wrong.
Skip the variable height header entirely. It's a dumb idea anyway. I did. Worked great for me. Now I am the proud owner of a significantly simpler DOM cobweb and no hurdles that lead me to stackoverflow.
Please see this fiddle: http://jsfiddle.net/qH6K3/
<div id="a">
<div id="b1">BOX1</div>
<div id="b2">BOX2</div>
</div>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{height:100%}
#b1 {
background-color: red;
height: 45px;
width:100%;
}
#b2 {
background: blue;
height: 100%;
width: 100%;
}
#a { height: 100%; padding-bottom: 45px; }
Please try this for CSS: http://jsfiddle.net/K64Mm/6/
Variable height, content 100% height (supports even iframe 100% height), no superfluous scrollbars, scrollable on touch devices.
<div class="wrapper">
<div class="top topBar">
</div>
<div class="content">
<iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
</div>
</div>
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }
.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }