How to make flex child don't overlap top padding?
In this example child .large is centered middle, but its top is over top boundary of its parent because of its larger height. Is there a way to prevent this and make .large to be after .flex padding-top without JS? flex-start will be bad solution because blocks inside .flex can have small height and must be in the center of .flex. .flex must be positioned as absolute or fixed.
https://jsfiddle.net/zoxamy9f/1/
.large {
background: red;
height: 200%;
flex: 1;
}
html, body {
height: 100%;
overflow: hidden;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
<div class="flex">
<div class="large"></div>
</div>
If you add a wrapper between the flex and large, you can accomplish that
I also used viewport units vh instead of %, since percent won't work to enable vertical centering.
Fiddle demo
Stack snippet - much content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Stack snippet - little content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Is it possible by any chance that you could alter your structure to something like this?
.large {
background: red;
height: 200%;
flex: 1;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.flex {
width: 100%;
height: 100%;
margin-top: 10%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
<div class="wrap">
<div class="flex">
<div class="large"></div>
</div>
</div>
Related
I am trying to have a header/footer and a scrollable div#middle. Within the scrollable div, another (inner) footer div#middle-bottom should be placed at the bottom of div#used-for-swipe-animation and always be visible.
This is my current code using flex-container (using flex is not a requirement):
html, body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
background: lightgreen;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Problem: Without the div#used-for-swipe-animation it works as expected. However, as the id suggests, div#used-for-swipe-animation is needed to perform some animation.
Nice-to-Have: Is it possible to have the scrollbar of div#middle to be displayed over full height of div#wrapper?
As per I understand your Que, you need fixed Header & Footer and scroll div in middle
html,
body {
margin: 0
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
overflow-y: auto;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background: lightgreen;
}
.main_center {
margin: 30px 0;
}
.middle {
flex-grow: 1;
overflow: auto;
}
.middle-bottom {
background: red;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background: lightblue;
}
<body>
<div class="wrapper">
<div class="top">top</div>
<div id="used-for-swipe-animation" class="main_center">
<div class="middle">
middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle<br>middle
</div>
<div class="middle-bottom">
middle-bottom<br>middle-bottom<br>middle-bottom<br>middle-bottom<br>
</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
Replay can lead perfection :)
Basically I have a div with an image and a div inside of it with content. I need to make the background image be the size of whatever the content is, so grow/shrink accordingly.
Right now, it only shows the full size of the image which results in a lot of space being left where there is no content.
Here is my current styling, it is required I used flexbox.
.section {
height: 100%;
.section_image {
position: relative;
height: 100%;
display: flex;
flex: 1 1 100%;
img {
object-fit: cover
}
}
.content {
position: absolute;
display: flex;
flex: 1 1 100%;
}
}
<div className="section>
<div className="section_image">
<img src={Image} alt="" />
</div>
<div className="content">
<h1>Title</h1>
<p>Body Text</p>
</div>
</div>
.section {
height: 100%;
}
.section_wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden
}
.section_image {
position: relative;
height: 100%;
display: flex;
flex: 1 1 100%;
}
img {
object-fit: cover;
width: 100%;
}
.content {
position: relative;
display: flex;
flex: 1 1 100%;
overflow: hidden;
width: fit-content
}
.content__elements {
display: flex;
z-index: 2;
color: white
}
<div class="section">
<div class="content">
<div class="section_wrapper">
<div class="section_image">
<img src="https://www.gardendesign.com/pictures/images/675x529Max/site_3/cosmos-pink-flower-pixabay_11886.jpg" alt="" />
</div>
</div>
<div class="content__elements">
<h1>Title</h1>
<p>Body Text</p>
</div>
</div>
</div>
When item's (#box) height is bigger than screen, parent container's (#wrap) bottom padding gets cut off.
Normal view, #wrap's bottom and top padding applied:
html, body {
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
</div>
</div>
You can use this code
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: 20px auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br>
</div>
</div>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I have a design using some bootstrap styling which has a white column on the right. The height should be 100%, but it isn't rendering at 100%. It renders at 100% of the initial screen height, but when you scroll down it's no longer white.
I've looked at several other CSS solutions on this site. I've tried making all parent elements 100% height. I've tried making it a flexbox column. I've tried putting "position: relative;" in the body. Nothing has worked yet. I'd prefer not to use JS to achieve this.
Simplified version of my HTML:
<body>
<div class="container">
<div class="main">
<h1>This is the main content area</h1>
</div>
<div class="right pull-right">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
</body>
The CSS:
body,html {
height: 100%;
background-color: #aaa;
}
body {
position: relative;
}
.main {
display: inline-block;
}
.container {
height: 100%;
}
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: 100%;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
.content {
height: 300px;
min-height: 300px;
margin: 10px 10px;
background-color: #ccc;
border: 1px solid #000;
}
Change your .right class to have height: auto;
It will size itself to fit with its content.
.right {
display: inline-flex;
flex-direction: column;
background-color: #fff;
width: 350px;
height: auto;
min-height: 100%;
border: 1px solid #E1E6E9;
margin-right: 100px;
position: absolute;
right: 100px;
}
http://codepen.io/smlariviere/pen/WrWgxQ