I have an angular2 app with left a sidebar and dynamic main content.
HTML:
<body>
<div class="full_height">
<div class="sidebar">Some content</div>
<div class="main">Some dynamic content</div>
</div>
</body>
CSS:
body{
width: 100%;
height: 100%;
margin: 0;
}
.full_height{
display: flex;
flex-direction: row;
align-items: stretch;
}
.sidebar{
background: black;
color: white;
width: 150px;
flex: 0 0 auto;
}
.main{
flex: 1 1 auto;
}
I need the sidebar grow to 100% height of the browser body if no information in the main block. And I need the sidebar and the main block have equal height when a big amount of information have been loaded to the main block via AJAX.
How to make the first part work?
JSFiddle
I think you just forgot to assign a 100% height to the HTML element. Is this what you tried to do ?
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.full_height{
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
}
.sidebar{
background: black;
color: white;
width: 150px;
flex: 0 0 auto;
}
.main{
flex: 1 1 auto;
}
<body>
<div class="full_height">
<div class="sidebar">Some content</div>
<div class="main">Some dynamic content</div>
</div>
</body>
If you want to make full height sidebar then sidebar will be fixed position and rest of the content will be relative position. Please check the below Snippet.
html{
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:after,
*:before{
box-sizing: inherit;
}
body{
margin: 0;
padding: 0;
}
.full_height{
background-color: white;
display: flex;
flex-direction: column;
}
#media (min-width: 992px){
.full_height{
padding-left: 330px;
}
}
.sidebar{
background-color: #5c5c5c;
color: white;
display: flex;
flex-direction: column;
margin-bottom: 30px;
padding: 20px;
width: 100%;
}
#media (min-width: 992px){
.sidebar{
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
width: 310px;
z-index: 1030;
}
}
.main{
background-color: #009688;
color: white;
font-size: 20px;
margin-bottom: 30px;
padding: 20px;
width: 100%;
}
<div class="full_height">
<div class="sidebar">Some content</div>
<div class="main">Some dynamic content</div>
</div>
Snippet two This relative content
html{
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:after,
*:before{
box-sizing: inherit;
}
body{
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.full_height{
background-color: black;
display: flex;
flex-direction: column;
padding: 20px;
}
#media (min-width: 992px){
.full_height{
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
width: 100%;
}
}
.sidebar{
background-color: #f5f5f5;
color: #009688;
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;
max-width: 100%;
padding: 20px;
}
#media (min-width: 992px){
.sidebar{
flex-basis: 310px;
max-width: 310px;
}
}
.main{
background-color: white;
color: black;
padding: 20px;
width: 100%;
}
#media (min-width: 992px){
.main{
padding-left: 40px;
}
}
<div class="full_height">
<div class="sidebar">Sidebar content</div>
<div class="main">Main Content</div>
</div>
Check the Snippet in full width view. All snippet is responsive.
If you want both the .sidebar and .main to fill the entire screen, just add the 100vh height.
.sidebar,
.main {
height: 100vh;
}
Related
I am attempting to create a flex layout as illustrated in the screenshots below.
This is what the page will look like on normal screen size (before resize).
Page resize will look like this, with sidebar over main content.
The code I have written appears to work. However, how can I make the sidebar fall under the main content when screen size is reduced?
CSS:
div#container{
display: flex;
flex-direction: column;
}
main{
display: flex;
background-color: #ccc;
flex-wrap: wrap;
height: 80vh;
}
header {
background-color: #F2F2F2;
height: 100px;
}
footer {
background-color: #F2F2F2;
height: 100px;
}
section#content {
background-color: #D62121;
width: auto;
flex-grow: 1;
}
section#sidebar {
background-color: green;
width: 350px;
}
/* For demo purposes */
#media (max-width: 815px) {
section#sidebar {
width: 100%;
}
main{
flex-wrap: wrap;
}
}
HTML
<div id="container">
<header>
<p>HEADER</p>
</header>
<main>
<section id="content">
<div>
<!-- Add long text here and main content falls below sidebar.-->
</div>
</section>
<section id="sidebar">
<h1>Sidebar</h1>
</section>
</main>
<footer>
<p>FOOTER</p>
</footer>
</div>
div#container{
display: flex;
flex-wrap: wrap;
}
main{
display: flex;
flex-wrap: wrap;
height: 80vh;
margin-bottom: 30px;
}
header {
background-color: coral;
height: 100px;
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 30px;
}
footer {
background-color: coral;
height: 100px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
section#content {
background-color: #D62121;
flex: 0 0 calc(100% - 380px);
max-width: calc(100% - 380px);
}
section#sidebar {
background-color: green;
width: 350px;
flex: 0 0 350px;
}
footer {
flex: 0 0 100%;
max-width: 100%;
}
/* For demo purposes */
#media (max-width: 815px) {
section#content,
section#sidebar{
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
section#content {
order: 2;
}
section#sidebar{
order: 1;
margin-bottom: 30px;
}
}
The layout breakage was because of the flex-grow:1. After setting its flex-grow to the initial value and setting its maximum width flex: 0 0 calc(100% - 380px) in it. The layout will stop expanding to its max-width and text will break accordingly.
I hope this will help. Please review in js fiddle.
https://jsfiddle.net/chhiring90/8xmvy4ur/
I have a pop-up modal which works overall, however the one annoyance is it has a hardcoded max-height which I'd like to eliminate.
Option #1:
Initially I explored using height: auto on the modal, which does keep the modal height to the natural height of the contents. However this effects the collapsing of the modal when you scale the browser viewport to a short height. The modal overflows out of the viewport, instead of only the green image area overflowing.
Option #2: I'm aware of the possibility of max-content (for height... or even max-height ?) but I haven't been able to get it to work anywhere, and anyhow it has spotty browser support.
Option #3 (current): Setting the modal to height: 100% and max-height: 500px is good enough, however obviously the content needs to be shorter than that.
Overall, requirements are:
A - In small screens, the modal should collapse with the green image area overflowing, thereby maintaining modal title and buttons in view.
B - In large screens, the modal height should only be as big as the contents.
C - Whatever happens, the modal should never visibly go past the global padding (2em).
See #modal in CSS below:
Demo and code here (Codepen)
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
/* OPTION #1 */
/* FAILS in small screen: overflow of green image not invoked */
/* height: auto; */
/* OPTION #2 */
/* Not working? */
/* height: max-content; */
/* OPTION #3 */
/* WORKS but specifying a max-height is not ideal */
height: 100%;
max-height: 500px;
width: auto;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
You are almost good, use max-height:100% and also add display:flex that will give the height:100% effect you are trying to achieve on the modal_inner
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
max-height: 100%;
display:flex;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
/*height: 100%; remove this*/
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
I have a flex box container, with a child element inside. When the screen size shrinks, I want the child to also shrink. Here is my existing code:
HTML:
<div class="container">
<div class="child"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
width: 570px;
height: 500px;
background-color: red;
}
Does anyone know how to accomplish this? Thanks.
UPDATE:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
flex-basis: 200px;
width: 800px;
background-color: red;
}
UPDATE 2:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 570px;
}
.child {
width: 100%;
height: 500px;
background-color: red;
}
Update number 3. Note this has not flex direction, therefore is column by default:
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.child {
background-color: red;
width: 800px;
height: 800px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: red;
width: 80%;
max-width: 800px;
height: 800px;
}
<div class="container">
<div class="child"></div>
</div>
You can add a media query to accomplish what you aim:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.child {
background-color: red;
width: 100%;
height: 800px;
}
#media screen and (min-width: 800px){
.container {
padding: 0 20px;
}
.child {
width: 800px;
}
}
Here is one just set the width of the .container to 100% of its container or body so when when the body shrinks also the width of .container reduced and give the .child 50% of its width
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 50vh;
}
.child {
position: relative;
width: 50%;
height: 100%;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
There is object-fit: contain as a way to resize the image so that the entire image fits within the frame, aligning the long side of the image with the frame.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.contain {
object-fit: contain;
}
<div>
<h2>object-fit: contain</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain" />
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" />
</div>
However, this does not work for div tags and so on, it works only for replacement elements.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
.contain-parent {
width: 150px;
height: 100px;
background: red;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
background: green;
margin-top: 10px;
}
.contain1 {
width: 50px;
height: 80px;
background: blue;
object-fit: contain;
}
.contain2 {
width: 80px;
height: 50px;
background: blue;
object-fit: contain;
}
<div>
<h2>object-fit: contain(not work)</h2>
<div class="contain-parent">
<div class="contain1"></div>
</div>
<div class="contain-parent">
<div class="contain2 narrow"></div>
</div>
</div>
How can I reproduce the same behavior as object-fit: contain on replacement elements with div tags,
span tags and so on? I want to display letter box when the aspect ratio does not match.