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;
}
Related
The main content div #page-content-wrapper is shaded a light grey in color.
How can the height of this div be extended such that the bottom of this div is at the bottom of the screen? height: 100%; does not seem to work.
Content is growable to beyond 1 viewport height, forcing vertical scroll to be necessary.
CSS
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
height: 100%;
}
Bootply: http://www.bootply.com/kkrDITPGrO
Use height: 100vh ... or give #wrapper and html, body also height: 100%
For an element to respond to a height using percent, its parent need a height, and if the parent also use percent, you need to go all the way to the html/body element for it to be able to calculate its height on something other than auto.
Updated bootply
Update based on comment
For content to be able to grow, use min-height: 100vh ... or min-height: 100% using the same "percent" principle as above
#page-content-wrapper {
min-height: 100vh;
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
}
Updated booply
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 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*/
}
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.
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