Refer to this Fiddle.
I have a top-level div whose height is configured as one screen height (height:100vh). Within this div, there is a fixed-height (60px) child div and another child div I want to grow to fill the remaining height (so as to be responsive with different screen sizes).
This child div has an image and some text. Currently, its width is hard-coded, or else the image fills the entire screen (and exceeds the length of its parent). Setting height:100% (or even calc(100% - 60px)) doesn't scale the div as I'd hoped.
.one-page {
min-height: 100vh;
max-height: 100vh;
background-color: #FF5555;
}
.fixed-size {
height: 60px;
border-style: solid;
}
.main-container {
background-color: #55FF55;
width: 300px;
margin: auto;
}
.subtitle {
text-align: center
}
.other {
background-color: blue;
}
img {
vertical-align: middle;
width: 100%;
height: auto;
}
<body>
<div class="one-page">
<div class="fixed-size">
this div is a fixed size
</div>
<div class="main-container">
<p>
<img src="http://images.clipartpanda.com/square-clip-art-clipart-square-shield-256x256-e296.png">
</p>
<div class="subtitle">
subtitle text
</div>
</div>
</div>
<div class="other">
something else
</div>
</body>
Try to use height:calc(100vh - 60px).
.main-container {
background-color: #ff00ff;
width: 300px;
margin: auto;
padding:0;
height:calc(100vh - 60px);
}
DEMO
Use flexbox to work it out. Run the below snippet and you'll understand. flex-grow: 1 will basically give all the remaining height to the second child.
.p {
height: 100vh;
display: flex;
flex-direction: column;
}
.c1 {
height: 60px;
background-color: green;
}
.c2 {
flex-grow: 1;
background-color: red;
}
<div class="p">
<div class="c1"></div>
<div class="c2"></div>
</div>
Related
Why .itm in this case take width 400px instead of 160px? In other cases div take same width like child, but when img is bigger and browser scale it - I got empty space
How to fix it? I fount only one way: set <img height="..." width="..." />, but I want more more suitable way because I don't know real image size.
.box {
display: flex;
}
.box .itm {
max-height: 400px;
max-width: 400px;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 100%;
max-width: 100%;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>
Problem
As the flex items do not have width or flex-basis properties defined, flex container space distributed as first element will take the max-width size, and the second item will take the remaining space.
Solution
Add width and flex-basis properties to flex items
I didn't understand why this is happening
I fixed this by moving the max-width directly to each image. In my case, this solves the problem, but it would not help if there was not only a picture but also other content in the container.
.box {
display: flex;
}
.box .itm {
display: flex;
background: red;
margin-right: 10px;
}
.box .itm img {
max-height: 400px;
max-width: 400px;
}
.box .itm .tst {
width: 160px;
height: 400px;
background: lime;
}
<div class="box">
<div class="itm">
<img src="https://picsum.photos/300/750"/>
</div>
<div class="itm">
<div class="tst">same block with 160x400 sime like img</div>
</div>
</div>
Imagine having this situation: a simple 3 rows layout made with flexbox, with the central row filling all the space available. Pretty standard stuff.
<body>
<div class="container">
<div class="flex-container">
<div>header</div>
<div class="content">
<div class="item red">asdasd</div>
<div class="item yellow">asdasd</div>
<div class="item green">asdasd</div>
</div>
<div>footer</div>
</div>
<div>
<body>
Here the CSS:
html,
body,
.container {
height: 100%;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.flex-container .content {
flex: 1;
}
.flex-container .content .item {
height: 100%;
}
(omitting css for background colors, you can guess it).
The problem is that the "content" div does not push down the footer div, keeping it at the bottom of the page, like is position:fixed with bottom: 0.
Scrolling the page show, except for this problem, the correct behavior, with 3 div with different color all sizing 100% the browser window.
What I'm missing?
EDIT: look at this jsfiddle
https://jsfiddle.net/rq1xywng/
I am not sure about what you are looking for. May be it will be help for you.
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
min-height: 100vh;
}
.container {
height: 100vh;
min-height: 100vh;
background-color: fuchsia;
}
.header, .footer {
height: 30px;
}
.flex-container .content {
display: flex;
height: 100%;
height: calc(100vh - 60px);
}
.flex-container .content .item {
width: 100%;
height: 100%;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
<div class="container">
<div class="flex-container">
<div class="header">header</div>
<div class="content">
<div class="item red">asdasd</div>
<div class="item yellow">asdasd</div>
<div class="item green">asdasd</div>
</div>
<div class="footer">footer</div>
</div>
<div>
So you have couple of errors here:
you set EVERY ITEM IN THE CONTAINER to be 100% - this amounts to 300% :)
their parent is "only" 100%
footer will be hidden unless given height
you used vh and % combined in an unhealthy way.
you should have 2 flex components:
.flex-container - to match to screen size
.flex-container .content - to be able to stretch the items
You should set .item to flex: 1;
Here is a working version: https://jsfiddle.net/oj0thmv7/5/
Here is a working example with scroll: https://jsfiddle.net/oyLbxsrc/
If you change the 100% to 100vh this works
.flex-container .content .item {
height: 100vh;
}
Or have I misunderstood the issue?
Basically I have this Angular material side nav with expandable navigation items
I want to make the second div scroll able when the items expand beyond the third div and also resizable so when I decrease the window size, it should always resize to fit between div 1 and and div 3.
I managed to implement the scrolling behavior with the following style applied:
title-div {
min-height: 10%;
}
items-div {
height: 80% //To force the info-div to be positioned at the bottom
max-height: 80%
overflow: auto;
}
info-div {
min-height: 10%;
}
However the resizing is not working properly. At a certain height the info-div(3) starts to get cut off instead of the item-div(2) resizing smaller for the info-div to fit in. How can I make this work?
You could easily achieve something like this using flexbox:
<div id="sidenav">
<div>Title</div>
<div class="items">
<div>item</div>
<div>item</div>
<div>item</div>
</div>
<div>Information</div>
</div>
#sidenav{
display: flex;
flex-direction: column;
height: 100%;
}
#sidenav .items{
flex-grow: 1;
overflow-y: auto;
}
https://codepen.io/Ploddy/pen/yLNaLyQ?editors=1100
when you set your second dives height to the relative space it should take and use overflow: auto it should work.
a POC:
* {
box-sizing: border-box;
margin: 0;
}
.container {
width: 100px;
border: solid 2px;
}
.one,
.three {
background: blue;
border: solid 1px;
height: 50px;
padding: 10px;
}
.two {
padding: 10px;
overflow: auto;
height: calc(100vh - 100px);
}
<div class="container">
<div class="one">title</div>
<div class="two">
body<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
</div>
<div class="three">title</div>
</div>
So I have a problem where I have 2 divs inside of another div with a fixed size. I the second of the two is too large to fit in the fixed height div so I want a scroll bara to appear. But the scrollbar goes outside of the content. How do I fix this?
html:
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>
css:
.main {
height: 250px;
overflow: hidden;
}
.first-child {
background-color: red;
}
.second-child {
max-height: 100%;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
https://codepen.io/RilleJ/pen/JeBVpz
I added an example as well to show what I mean. Basically I want to be able to scroll all the way down in the blue box and see the content without setting a fixed height. (Not that the content above, the red box, can be different sizes)
Use flexbox to divide the space of the container among the children.
Add flex-grow: 0, and flex-shrink: 0 for a child that just needs to take the space it needs for its content.
Add flex-grow: 1, and flex-shrink: 1 on the other children to divide the remaining space equally (each child will take at least the size of its content).
.main {
height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.first-child {
flex-grow: 0;
flex-shrink: 0;
background-color: red;
}
.second-child {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>
I'm working with 5 divs:
Main Div (works as wrapper, width and height set to auto)
sub div (contains two divs, red and blue, width:75% and height:auto)
red div (height:90% width:auto)
green div (height:10% width:auto)
blue div (width:25% height:auto)
as shown below:
with current width and height settings divs are proportionally responsive to each other.
but problem is if I set height:89% bottom-margin:1% of red div, then they do not produce the same output, sub div which contains red and green, get more height if veiwport is small and it becomes shorter than blue div if viewport is large screen.
I want to adjust it in such a manner that green div remains adjusted accordingly with blue div at bottom all the time, no matters what device i'm using.
Now unfortunately my code doesn't seem to work with fiddle and neither does snippet work, but it works on my browser and so does on liveweave.com.
here is working example on liveweave.com
here is my complete code:
HTML:
<body>
<div class="main">
<div class="sub">
<div class="red"></div>
<div class="green"></div>
</div>
<div class="blue"></div>
</div>
</body>
CSS:
.main{
width: auto;
height: auto;
}
.sub{
width: 75%;
height: auto;
float: left;
}
.red{
width: 100%;
height: 85%;
background-color: red;
}
.green{
width: 100%;
height: 15%;
background-color: green;
}
.blue{
width: 25%;
height: 100%;
background-color: blue;
float: right;
}
You can use Flexbox to create this layout. Flexbox will make flex-items same height by default so if you increase height of blue div, it will increase height of sub div also.
body {
margin: 0;
}
.main {
min-height: 100vh;
display: flex;
}
.blue {
background: blue;
flex: 1;
}
.sub {
flex: 3;
display: flex;
flex-direction: column;
}
.red {
flex: 1;
background: red;
}
.green {
background: green;
flex: 0 0 10%;
}
<div class="main">
<div class="sub">
<div class="red"></div>
<div class="green"></div>
</div>
<div class="blue"></div>
</div>