After resizing of page nested content-box get down thru main div and break it.
It's look like so:
Here is live example (Content loading work on Chrome only). Here is jsfiddle
The css code that response for displaying problem (as I think) part:
.Central {
display: flex;
flex-direction: row;
flex-grow: 1;
height: auto;
}
.LeftSide {
background-color: #ddd0d1;
flex-grow: 8;
}
.RightSide{
background-color: #965254;
flex-grow: 1;
}
Instead of height: 100vh, use min-height: 100vh.
.MainContainer {
background-color: #fee9ea;
margin-left: 0%;
margin-right: 0%;
/* height: 100vh; <-- remove fixed height */
min-height: 100vh; /* new */
box-sizing: border-box;
display: flex;
flex-direction: column;
}
That will release your main container to expand with the content.
If you prefer the fixed height, then keep the height: 100vh and add vertical scroll:
.LeftSide {
background-color: #ddd0d1;
flex-grow: 8;
overflow: auto; /* new */
}
Related
I'm currently having a issue I've been having for some days. I have a div which has a section which in that section is a list of fruits. I'm trying to make the list scrollable with a height of 80%, although the generated-list container has a height:100% and which the main container has a height of min-height:100vh which is interfering with that. Since the list's primary div doesn't have a set height it just keeps overflowing. What can I do?
Code Structure:
https://i.imgur.com/tI8dRFl.png
Problem: https://i.imgur.com/FfkKUg8.gif
.container {
width: 100%;
min-height: 100vh;
display: flex;
}
.generated-cnt {
display: flex;
flex-direction: column;
height: 100%;
width: clamp(200px, 30vw, 500px);
}
.generated-list {
height: 80%;
padding: 20px 35px;
gap: 20px;
display: flex;
flex-direction: column;
}
I have an effect on my website, and it only works within a 16:9 aspect ratio. This means I need to keep it within that aspect ratio. I wanted to make a box that was vertically and horizontally centered which could resize proportionally to contain the effect. I looked up many tutorials and guides on flex resizing, but i still cant get it to work properly. The padding in the that contains the box is lopsided, and it doesnt align properly either. It scrolls horizontally even though im using 100vh/vw?? Does 100% of the viewport's height really mean what it says?
I'm really not sure what to do...
Codepen example of my code below:
https://codepen.io/Ktashi/pen/KKeOJey
html
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
css
body {
padding: 0;
margin: 0;
}
.flex-align {
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.aspect-ratio-box {
height: auto;
aspect-ratio: 16/9;
background: red;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 94vw;
max-height: 94vw;
max-width: 94vw;
}
I tried changing the flex-grow: property's value, along with flex-shrink: and flex-basis: but that didn't help much. I'm very stuck as I've only really been coding with html and css for about a year off and on.
You can use the CSS media query to test whether the item will fit within the parent which has 100vw/100vh dimensions.
This snippet is just to give the idea.
It does a couple of things - makes the parent's padding be part of its dimensions by setting box-sizing border-box and sets the height or width as % of the parent dimensions.
.aspect-ratio-box {
aspect-ratio: 16/9;
background: red;
}
#media (max-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
width: 94%;
}
}
#media (min-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
height: 94%;
}
}
body {
padding: 0;
margin: 0;
background: black;
}
.flex-align {
background: blue;
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
I am trying to make flexible my application, I use 100vw width and 100vh height for my components, in the browser on the computer it is displayed perfectly in any resolution. But as soon as I start using it in mobile resolution, the body draws an empty background below, in the picture I have displayed it with a blue background. Tell me what could be the problem here and how can I solve it? Thanks
html, body {
height: 100%;
}
.page {
top: 0;
display: flex;
flex-direction: row;
min-width: 100vw;
min-height: 100vh;
&_content {
flex-direction: column;
width: 100%;
background-color: #ec7373;
min-height: 100vh;
}
}
You may need to use the box-sizing css property on your .page class to define your height and width and override possible padding and margin
like so :
html, body {
height: 100%;
}
.page {
box-sizing : border-box;
top: 0;
display: flex;
flex-direction: row;
min-width: 100vw;
min-height: 100vh;
&_content {
flex-direction: column;
width: 100%;
background-color: #ec7373;
min-height: 100vh;
}
}
You can refer to W3C but please do share the HTML and CSS as we can't really help without being able to reproduce the issue.
Attaching a page layout to explain my requirements better.
Place the the text just before the footer section.
Some time the footer may not be visible (may need scroll), in that case bring the text to the bottom of visible area.
I have tried many ways to achieve this.
Any pointers to solve this issue would be helpful.
Thanks,
Santhosh
You can use flexbox to achieve this
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
/* occupy all height */
flex: 1 0 auto;
/* nested flex container */
display: flex;
flex-direction: column;
}
.bottom-text {
/* Move to the bottom */
/* This works because this is flex item */
margin-top: auto;
}
/* styles just for demo */
body {
text-align: center;
}
header {
background-color: tomato;
}
.content {
background-color: lightsteelblue;
}
.bottom-text {
background-color: moccasin;
}
footer {
background-color: lime;
}
<header>Page header</header>
<section class="content">
Page content
<div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>
For showing bottom-text when footer is not visible we'll use Javascript:
// Checks if element is visible on screen
function checkVisible(element) {
var rect = element.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
var footer = document.querySelector("footer");
var bottomText = document.querySelector(".bottom-text");
var bottomTextFixedClassName = "bottom-text--fixed";
// Sets element position as fixed
// when footer is not visible on screen
function setFixedButtonText() {
if (checkVisible(footer))
bottomText.classList.remove(bottomTextFixedClassName);
else
bottomText.classList.add(bottomTextFixedClassName);
}
window.addEventListener("scroll", setFixedButtonText);
setFixedButtonText();
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
/* occupy all height by flex-grow: 1 */
/* Don't shrink using flex-shrink: 0 */
/* Setting flex-basis to 1500px to emulate long content */
/* Replace 1500px with auto in production code */
flex: 1 0 1500px;
/* nested flex container */
display: flex;
flex-direction: column;
}
.bottom-text {
/* Move to the bottom */
/* This works because this is flex item */
margin-top: auto;
}
.bottom-text--fixed {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
/* styles just for demo */
body {
text-align: center;
}
header {
background-color: tomato;
}
.content {
background-color: lightsteelblue;
}
.bottom-text {
background-color: moccasin;
}
footer {
background-color: lime;
}
<header>Page header</header>
<section class="content">
Page content
<div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>
If you need IE suppost you can use change min-height: 100vh; to height: 100vh;. This is workaround for IE's min-height bug for flex with flex-direction: column;.
I have the following construct to render a simple layout with fixed header and footer and a flexible body that with scrollable content: http://jsbin.com/jokevuyave/1/edit?html,css
<div id="main-view">
<div class="rows">
<div class="head">header</div>
<div class="main scroll"></div>
<div>footer</div>
</div>
</div>
and this are the styles:
.rows,
.columns {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.columns {
flex-direction: row;
max-height: 100%;
overflow: hidden;
}
.main {
flex: 1;
}
.scroll {
display: flex;
overflow: hidden;
position: relative;
flex-direction: column;
}
.scroll > * {
margin: 0;
width: 100%;
overflow: auto;
}
html,
body,
#main-container,
#main-view,
.scrollable {
height: 100%;
margin: 0
}
#main-view > div {
max-height: 100%;
display: flex;
}
.head {
height: 120px
}
This construct works well in firefox and also in chrome until the version 43 was released. Now the height of the containers is wrong, header and footer don't expand to display its content and the content container lays over the header content. Any idea how to fix this?
Edit
The problem seems to be this line:
#main-view > div {
max-height: 100%;
}
The idea is that the box should only expand if the content is to large.
Change it to
#main-view > div {
height: 100%;
}
fix the wrong height for the inner container but now the box has always the height of 100%, even if the content is really small.
There is a problem with max-heigth and flexbox: flexbox misbehaving with max-height
So the solution is to set the flex property to every element insight rows container to 0
.rows .main {
flex: 1;
}
.rows > * {
flex: 0 0 auto
}