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.
Related
Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
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;
}
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 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 have been searching and trying all kinds of different stuff to make it work, but I did not succeed.
this is a link that may help to understand: http://bflydesign.no-ip.org:9876
Here is my issue: I have a centered div (width 75% and max of 1020px) that contains 3 div's: 30px - adaptive width - 30px.
The two smaller div's of 30px only contain a background (white stripes). When resizing I want the center-div to adapt but not the two outer div's. What is happening now is that the width of the outer div's is given to the center div. How can I keep the fixed width on the outer div's?
in this fiddle it seems no problem: http://jsfiddle.net/bflydesign/N3LZ9/
.left, .right {
min-height: 700px;
width: 30px;
min-width: 30px;
background-color: yellow;
}
To make just the 2 image div elements have a fixed width when you resize, you have to add the following to your .center class:
.center {
max-width: 960px;
margin: 0px auto;
overflow: hidden; /* <- add this */
}
You can do the following if you want to make it responsive:
(all three div elements will be properly resized.)
.center {
max-width: 960px;
margin: 0px auto;
width: 94%;
}
.left, .right {
height: 1000px;
min-width: 30px;
background-image: url('cubes_bg.png');
width: 2.94%;
}
The problem here was that your contents didn't fit into your parent div so your images were behind the center div.
So if you specify your width elements correctly calculated so the total width in your parent div is 100%, there is no problem.