Here is my html mockup
html, body {
margin:0px;
padding:0px;
height: 100vh;
background-color: gray;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: red;
}
.left {
flex: 0.5;
height: 500px;
background: blue;
}
.right {
flex: 0.5;
height: 1300px;
background: green;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Here class "right" has height of 1300px which makes scroll on to the window.
When I scroll the parent "container" is not as the height of "right".
I want the parent "container" height to be increased if child "right" height is increased".
How to achieve this ??
I did not understand what you mean, but test this code..
.container {
display: -ms-grid;
display: grid;
background-color: red;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
gap:30px;
width: 100vw;
height: 100vh;
}
.left {
height: 200px;
background: blue;
}
.right {
background: green;
}
Related
I have a very simple grid layout of the menu, header, and content.
I would like the content (blue box) to stretch vertically. As you can see, the grid element (yellow box) already stretches vertically, but the blue element inside of it (which should be dynamic content) does not.
Is there a way to achieve this 1) without switching the whole grid structure to flexbox and 2) without using calc to give the blue content 100vh minus the header height?
.container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
grid-template-areas: "menu header" "menu content";
box-sizing: border-box;
overflow: hidden;
}
.mainMenuWrapper {
grid-area: menu;
height: auto;
}
.headerWrapper {
grid-area: header;
height: auto;
}
.contentWrapper {
grid-area: content;
overflow-y: auto;
height: auto;
background-color: yellow;
}
.menu {
height: 100vh;
background-color: red;
width: 50px;
}
.header {
height: 80px;
background-color: green;
}
.content {
background-color: blue;
width: 100%;
height: ???
}
<div class="container">
<div class="mainMenuWrapper">
<div class="menu">
menu
</div>
</div>
<div class="headerWrapper">
<div class="header">
header
</div>
</div>
<div class="contentWrapper">
<div class="content">
content
</div>
</div>
</div>
Image:
JSFiddle link: https://jsfiddle.net/the2sj1n/3/
You can apply height: 100% on that blue box .content
body {
margin: 0; /*Removed unexpected margins from browsers' default styles*/
}
.container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: min-content 1fr;
grid-template-areas: "menu header" "menu content";
box-sizing: border-box;
overflow: hidden;
}
.mainMenuWrapper {
grid-area: menu;
height: auto;
}
.headerWrapper {
grid-area: header;
height: auto;
}
.contentWrapper {
grid-area: content;
overflow-y: auto;
height: auto;
background-color: yellow;
}
.menu {
height: 100vh;
background-color: red;
width: 50px;
}
.header {
height: 80px;
background-color: green;
}
.content {
background-color: blue;
width: 100%;
height: 100%; /*The change here*/
}
<div class="container">
<div class="mainMenuWrapper">
<div class="menu">
menu
</div>
</div>
<div class="headerWrapper">
<div class="header">
header
</div>
</div>
<div class="contentWrapper">
<div class="content">
content
</div>
</div>
</div>
I have a sidebar a header and a main container. main container and header is nested inside a parent div. When I set height 100% for both sidebar and main container the sidebar doesn't take 100% of the height of the body. I was thinking to not use any percentage values and let flexbox do the work. But I suspect that as I append elements inside the main container area sidebar will behave the same and not take the height of the body space. How can I fix this?
html {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
display: inline-flex;
min-height: 100vh;
}
.sidebar-container {
background-color: #00ffff;
width: fit-content;
}
.header_main {
display: inline-block;
position: absolute;
color: white;
}
.header {
background-color: black;
width: 100vw;
}
.main {
height: 100vh;
width: 100vw;
background-color: bisque;
}
<div class="sidebar">
<div class="sidebar-container">sidebar</div>
</div>
<div class="header_main">
<div class="header">header</div>
<div class="main">main</div>
</div>
Easiest way would be to use CSS-Grid. Then simply set the body as grid-container and give it a min-height: 100vh:
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: min-content auto;
}
aside {
width: fit-content;
background-color: #00ffff;
grid-row: 1 / -1;
}
header {
background-color: pink;
}
main {
background-color: bisque;
}
<aside>Sidebar</aside>
<header>Header</header>
<main>Main</main>
<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
.container{
width: 100vw;
height: 100vh;
display: flex;
}
.col-1{
width: 40%;
height: 100%;
background-color: blue;
}
.col-2{
width: 60%;
height: 100%;
background-color: red;
}
How can I achieve the result of col-1 adjusting its width up until a certain point? (let's say its width will stop shrinking at 20 rem, and col-2's width will auto adjust to fill the remaining width of the container space available?
Start ditching flex in favor of grid, it's so much easier and more powerful as well:
body { margin: 0; }
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: minmax(15rem, 1fr) 1fr;
}
.col-1 {
background-color: blue;
}
.col-2 {
background-color: red;
}
<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
you can use display: grid; instead of flex. then set grid-template-columns: 20rem 1fr; and then set both col-1 and col-2 width to 100%. that if you change the grid-template-columns both col-1 and col-2 will adjust with it!
i think this should work!
.container{
width: 100vw;
height: 100vh;
display: flex;
}
.col-1{
width: 20%;
height: 100%;
background-color: blue;
}
.col-2{
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
by replacing width: 60% from .col-2 to width: calc(100% - 100px); using calc!
If you're using display: flex you should use the flex methods of defining the scaling (instead of width).
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.col-1 {
flex: 0 1 20rem;
background-color: blue;
}
.col-2 {
flex: 1 0 0;
background-color: red;
}
<div class='container'>
<div class='col-1'></div>
<div class='col-2'></div>
</div>
I need to setup the following DIV structure (See image below. It tells more than a 1000 words)
The structure consists of 2 colums. The main column (left) has a variable width and 100% height.
The right colums has a FIXED width of 380px and 100% height.
Then inside the right column I need 3 DIVS.
The top DIV has a fixed height of 200px and must be aligned to the top.
The bottom DIV has a fixed height of 150px and must be aligned to the bottom.
The middle DIV has a variable height and must fill up the space vertically.
This is the DIV setup And the CSS I have:
.main-content {
width: 100%;
padding: 0px;
}
.col-1 {
width: calc(100% - 380px);
min-height: calc(var(--vh, 1vh)*100);
background-color: #2693FF;
float: left;
}
.col-2 {
width: 380px;
min-height: calc(var(--vh, 1vh)*100);
float: right;
}
.col-2-top {
height: 200px;
background-color: #00B200;
}
.col-2-middle {
height: 100%;
background-color: #FF8000;
}
.col-2-bottom {
height: 100px;
background-color: #B25900;
}
<div class="main-content">
<div class="col-1"></div>
<div class="col-2">
<div class="col-2-top"></div>
<div class="col-2-middle"></div>
<div class="col-2-bottom"></div>
</div>
</div>
Then... Column 1 and 2 should stack when the viewport width becomes less than 768px.
Column 1 on top and Column 2 below it.
Like this:
I think I'm almost there, but I'm having problems with the height of the Main DIV and the heights and aligning of the DIV col-2 middle DIV. I also need a bit helpt to get these divs stack nicely above each each other.
I would suggest that you use grid layout instead of floating around your <div>s, grid layout allows you to structure your layout and separate them in columns and rows, and areas using grid-template-areas.
for max-width:748 just add media query, here is how it might be implemented:
body {
padding: 0;
margin: 0;
}
.main-content {
display: grid;
background-color: #2196F3;
grid-template-areas:
'main fixed-top'
'main variable-mid-area'
'main fixed-bottom';
background-color: #2196F3;
height: 100vh;
grid-template-columns: 1fr 380px;
grid-template-rows: 200px 1fr 150px;
}
.main-content > div {
color: #fff;
font-size: 30px;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background-color: #2693FC;
}
.variable-mid-area {
grid-area: variable-mid-area;
background-color: #FF8015;
}
.fixed-top {
grid-area: fixed-top;
background-color:#00B21F;
}
.fixed-bottom {
grid-area: fixed-bottom;
background-color: #B2590B;
}
#media only screen and (max-width: 768px) {
.main-content {
grid-template-areas:
'main'
'fixed-top'
'variable-mid-area'
'fixed-bottom';
grid-template-rows: 300px 200px 1fr 150px;
grid-template-columns: 100%;
height: auto;
}
}
<div class="main-content">
<div class="main"> main </div>
<div class="fixed-top"> 200 </div>
<div class="variable-mid-area"> auto </div>
<div class="fixed-bottom"> 150 </div>
</div>
If you have any questions how the css works, feel free to ask them in the comments.
I know the background-colors are irrelevant but they help to visualize it.
.container {
min-width: 768px;
width: 100%;
display: grid;
grid-template-columns: calc(100% - 380px) 1fr;
min-height: 100vh;
}
.col1 {
background-color: dodgerblue;
}
.col2 {
display: flex;
flex-direction: column;
}
.col2-row1 {
height: 200px;
background-color: orange;
}
.col2-row2 {
background-color: forestgreen;
height: 100%;
}
.col2-row3 {
height: 150px;
background-color: red;
}
#media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
<div class="container">
<div class="col1">1</div>
<div class="col2">
<div class="col2-row1">2</div>
<div class="col2-row2">3</div>
<div class="col2-row3">4</div>
</div>
</div>
How to make side parts of web page reduce they width with reducing width of whole page by degrees?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: grid;
grid-template-columns: 10% 80% 10%;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 100% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
</body>
</html>
In example below after max-width = 1000px side elements are dissapearing instantly, but I want to make them reducing they width reacting by every pixel changed on max-width. How to make it?
If I understand your requirement correctly...change the initial grid-template-columns to
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 1fr 0;
}
}
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
You can animate all with flex-box and just by changing some of your css.
.container {
display: flex;
min-height: 100vh;
flex-direction: row-reverse;
}
.side-right {
background: red;
width: 100%;
}
.side-left {
background: blue;
width: 100%;
}
.main {
background: green;
min-width: 600px;
}
Thats just a basic example. Consider reading more about flex-box.
Try to add min-with: 50px; to .side-right and .side-left
And then give them both an z-index: 1;
So they wont lay under your main
Hope that helps