I have a navbar with a fixed height, underneath a control div with also a fixed height and below that I have another div calendar. calendar is scrollable. I want the calendar height to have the remaining screen height below control and the bottom of the screen. This way the window is not scrollable, only the calendar is scrollable. However setting height: 100% does not work and flex: 1 neither.
This is what I have when I set the height of calendar to a fixed height but as I explained I want the height to be the rest of the screen size.
Any Idea?
.navbar {
height: 50px;
background-color: indianred;
}
.window {
display: flex;
flex-direction: column;
flex: 1;
}
.control {
height: 100px;
background: khaki;
}
.calendar {
height: 200px;
width: 100%;
bottom: 0;
left: 0;
}
.wrapper {
position: relative;
background-color: lightgray;
width: 100%;
height: 100%;
overflow: scroll;
}
.main {
width: 1500px;
height: 1500px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
<nav class="navbar"></nav>
<div class="window">
<div class="control">
</div>
<div class="calendar">
<div class="wrapper">
<div class="main">
</div>
</div>
</div>
</div>
Run this Code below:
I used height: calc() method full height of the screen minus 150px for nav and controls.
.navbar {
height: 50px;
background-color: indianred;
}
.window {
display: flex;
flex-direction: column;
flex: 1;
}
.control {
height: 100px;
background: khaki;
}
.calendar {
height: calc(100vh - 150px);
width: 100%;
bottom: 0;
left: 0;
}
.wrapper {
position: relative;
background-color: lightgray;
width: 100%;
height: 100%;
overflow: scroll;
}
.main {
width: 1500px;
height: 1500px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
<nav class="navbar"></nav>
<div class="window">
<div class="control">
</div>
<div class="calendar">
<div class="wrapper">
<div class="main">
</div>
</div>
</div>
</div>
Related
Hello everyone, I'm trying to setup the main content of the homepage as shown in the image but can't really figure a few things.
Somehow everything I try results in the image to overflow the container and be as big as the page. I don't want to set a fixed size for the image, but rather have it proportional to the view height and width
This is my code right now:
<section class="main">
<div class="main-left">
<div class="container">
<img src="assets/images/wine.png">
</div>
</div>
<div class="main-right">
<div class="container">
<img src="assets/images/oil.png">
</div>
</div>
</section>
.main {
display: flex;
background-color: #f1eee9;
height: 100%;
}
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 80vw;
height: 80vw;
}
.container img {
display: block;
width: 100%;
height: 100%;
}
I haven't yet added the text so it would be REALLY helpful if you could suggest how to do that as well..
You should use : object-fit: cover;
which is documented here : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
With your exemple I made that (changed container height to 80vh and not vw)
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
width: 80vw;
height: 80vh;
background-color: blue;
}
.container img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}
You can optimize your code like below it got correct:
<section class="main">
<div class="main-left">
<img src="assets/images/wine.png">
</div>
<div class="main-right">
<img src="assets/images/oil.png">
</div>
</section>
.main {
display: flex;
flex-direction: row;
}
.main-left , .main-right{
flex: 1;
}
.main-left {
background-color: #111;
}
.main-right {
background-color: #1f1f1f;
}
.main > div img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}
I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
}
.RightSection {
width: 100%;
background-color: black;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
Do you want this?
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
position: sticky;
top: 0;
}
.RightSection {
width: 100%;
background-color: black;
position: sticky;
top: 0;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
So I'm having some issues using <canvas>. It's taking up too much room when at 100% height and width and when it's set at only 100% height, it still causes and overflow for some reason.
Examples
With width and height at 100%, canvas takes up way too much room
.flex {
display: flex;
flex-direction: column;
height: 100vh;
}
.upper {
background-color: blue;
height: 10%;
}
.lower {
flex: 1;
background-color: orange;
}
html, body {
padding: 0;
margin: 0;
}
canvas {
height: 100%;
width: 100%;
background-color: red;
padding: 0;
margin: 0;
}
.inner {
width: 100%;
height: 100%;
background-color: yellow;
position: relative;
}
<div class="flex">
<div class="upper">
</div>
<div class="lower">
<div class='inner'>
<canvas></canvas>
</div>
</div>
</div>
Here, canvas is set at 100% height, yet it causes an overflow for some reason.
.flex {
display: flex;
flex-direction: column;
height: 100vh;
}
.upper {
background-color: blue;
height: 10%;
}
.lower {
flex: 1;
background-color: orange;
}
html, body {
padding: 0;
margin: 0;
}
canvas {
height: 100%;
background-color: red;
padding: 0;
margin: 0;
}
.inner {
width: 100%;
height: 100%;
background-color: yellow;
}
<div class="flex">
<div class="upper">
</div>
<div class="lower">
<div class='inner'>
<canvas></canvas>
</div>
</div>
</div>
I need to avoid the overlapping of the div's when the browser window is shrinked vertically in the following piece of code:
`
<html>
<body>
<style>
#box {
display: flex;
flex-direction: column;
align-items: center;
}
#top {
background-color: red;
height: 560px;
width: 400px;
}
#bottom {
background-color: green;
height: 100px;
width: 400px;
position: absolute;
bottom: 0
}
</style>
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<body>
</html>
`
Why are the div's getting overlapped. is there a way that this overlapping can be avoided and having the same initial structure? The bottom div acts as a footer in the real scenario. Thanks in advance!
Use min-height on the box, remove absolute positioning from the bottom and both div's heights will be kept.
When the margin-top: auto is set on a flex column item, it will push it to the bottom of is parent, which you can see on bigger screens.
body {
margin: 0;
display: flex; /* IE bug fix */
}
#box {
flex-grow: 1; /* fill body's width */
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
#top {
background-color: red;
height: 560px;
width: 400px;
border: 1px solid black;
}
#bottom {
margin-top: auto; /* push it to the bottom on big screen */
background-color: green;
height: 100px;
width: 400px;
border: 1px solid black;
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
If they at some point they need to shrink, with this sample the red div does, where the height is fixed to full viewport.
It works like that, that the green is given flex-shrink: 0, which prevent it from shrink and keep its set height.
html, body {
margin: 0;
}
#box {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
#top {
background-color: red;
height: 560px;
width: 400px;
border: 1px solid black;
}
#bottom {
margin-top: auto;
flex-shrink: 0;
background-color: green;
height: 100px;
width: 400px;
border: 1px solid black;
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
You need to set position: relative; to parent, in this case to body element, it will solve the issue. When the parent's position is relative, and the child's position is absolute, the child will respect parent and will be positioned relatively to the parent:
body {
position: relative;
}
#box {
display: flex;
flex-direction: column;
align-items: center;
}
#top {
background-color: red;
height: 560px;
width: 400px;
}
#bottom {
background-color: green;
height: 100px;
width: 400px;
position: absolute;
bottom: 0
}
<div id="box">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
The red is the header.
Then I have 5 rows, where I want to let use each 20% of the remaining space.
But instead it takes 20% of the window space. How can this be fixed?
html:
<div id="container">
<div id="header"></div>
<div id="items">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
</div>
</div>
css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#header {
position: relative;
width: 100%;
height: 10%;
background: red;
}
#items {
position: relative;
width: 100%;
height: 100%;
}
.item {
height: 20%;
width: 100%;
}
#item1 {
background: green;
}
#item2 {
background: blue;
}
#item3 {
background: orange;
}
#item4 {
background: purple;
}
#item5 {
background: brown;
}
http://jsfiddle.net/clankill3r/dabrm8js/
#items {
position: relative;
width: 100%;
height: 90%;
}
10% is taken by header, so you have 90% of height for items (and not all 100%)...
Set the height of your items div to 90%.
Next to the header (10%) they will fill the screen. Then the .item divs will each take up to 20% of their parent (#items).
So try
#items {
position: relative;
width: 100%;
height: 90%;
}
You can do this with CSS tables.
1) Set display:table on the container and give it a background color (this will be the color of the header)
2) Set display:table-row on the header and items
FIDDLE
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#container {
display: table;
width: 100%;
height: 100%;
background: red;
}
#header {
display: table-row;
width: 100%;
height: 40%;
}
#items {
display: table-row;
height: 100%;
}
.item {
height: 20%;
width: 100%;
}
#item1 {
background: green;
}
#item2 {
background: blue;
}
#item3 {
background: orange;
}
#item4 {
background: purple;
}
#item5 {
background: brown;
}
<div id="container">
<div id="header"></div>
<div id="items">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
</div>
</div>
NB: If CSS3 is an option this can also be done with flexbox.
I'd use flex boxes for this:
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#header {
flex: 0 0 auto; /* fixed height */
min-height: 10%; /* you don't need this? */
}
#items {
flex: 1 0 auto; /* take the remaining height (grow) */
display: flex;
flex-direction: column;
}
.item {
flex: 1 1 auto; /* distribute height equally, 20% height for 5 rows, 25% for 4 etc. */
}
(test)
For older browsers support you need to add prefixed version of the properties and the older properties (like box-orient)
Tables may do the job too, if you can live with their limitations with padding, margins and positioning
Height of items need to be 90% as 10% is already used by header part.