I have two divs as shown below (A and B):
Section B is has an input field with max-height of 100px (as an example) and overflow-y auto: This way, the input field will only be certain height.
.section_B{
position: absolute;
bottom: 0;
width: 100%;
}
.section_B_input{
max-height: 100px;
overflow-y: auto;
}
Because Section B's height can be anywhere in between 20px and 100px (for example), the section A's height needs to be dynamic and is depended on Section B height.
I read that display:flex can be used somehow, but I am not sure how to.
Any suggestions?
Thanks!
The technique with flexbox is to add flex-grow: 1; to the element you want to have a dynamic height. Here is a quick example.
* {margin:0;padding:0;box-sizing:border-box;}
html,body,.flex {
min-height: 100vh;
}
.flex {
display: flex;
flex-direction: column;
}
.a {
flex-grow: 1;
background: #eee;
}
.b {
background: #333;
}
section {
padding: 2em;
}
input {
transition: padding .5s;
}
input:focus {
padding: 2em;
}
<div class="flex">
<section class="a">
</section>
<section class="b">
<input>
</section>
</div>
Related
I would like two elements (divs) in a column. The first has a fixed height, and the second I want to fill all remaining height. If the content of the second element exceeds the space left, I want to scroll its contents, and not have the second element take up more space (which causes the parent to scroll).
Image (current)
For example, the "first element" is the search bar in this photo. Fixed height, and remains on top.
The "second element" is the data table. As you can see at the bottom, the table contents extend the height of the page, and the entire page becomes scrollable. This is not what I am looking for.
Image (desired) I would like the table container to behave similarly to this red box. It fills it's remaining height, and when it contains content that overflows, I would like just that element to scroll. Only scroll the content within the confines of the red box.
I have seen many examples similar to this, but all of them have a specified height for the "second element", even if it is a vh property. vh doesn't work for me since the 100% isn't the entire viewport.
I've been using flexbox to try and achieve this, and I get close, but I've only ever been able to either specify a height for the "second element", or have it grow to fill available space, but then exceed it, and overflow the whole container.
The below code is very close to desired behavior, except when the viewport becomes to small, "box 2" goes off screen and the whole thing scrolls, I want the content in "box 2" to scroll.
html,
body {
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2</div>
</div>
Just apply an overflow:auto on the second div and a max-height to the container.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
max-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
overflow: auto;
}
.expando {
height: 1000px;
/* for demo */
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2
<div class="expando"></div>
</div>
</div>
html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
height: 100%;
overflow: auto;
}
It seems so simple, but I wrap my mind about it and googled a lot but couldn't find an answer:
Container with two vertical rows, one has height defined in pixels (header), and the other has image that should stretch as much as remaining height (slider div). The problem is that this height of header is dynamic (as in unknown) and we can't use that value in defining CSS of container or slider div.
How do I solve it without javascript?
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
}
#slider {
height: 100%; /* this is wrong; how to set height to stretch element? */
}
img {
width: 100%;
height: 100%;
}
Header is set to 40px just for the sake of the example. It could be any other value, but the CSS definition of other elements shouldn't be aware of that, because it's dynamically loaded 3rd party component with inline CSS.
Also, slider div is a complex slider (Swiper) that renders code with bunch of nested divs but I need to use exactly that one.
But this DOM structure should be rough sketch of my case.
Example is here: https://jsfiddle.net/snaokLxd/3/
Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex: 1 0 0;
}
img {
width: 100%;
height: 100%;
vertical-align: top;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Flex example below:
* {
margin: 0;
}
section {
height: 100vh;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex-grow: 2;
}
img {
display: block;
width: 100%;
height: 100%;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Also on JSFiddle.
Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
Here's a way to do this inspired by bootstrap:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
#Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful.
I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element.
Here's a (very ugly) example
Relevant Markup
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
position:sticky was mentioned by Juozas Rastenis above but without code example.
Here's a minimalist example:
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}
<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>
You can achieve it with a css alternative position: sticky
It acts great but the only problem is browser support (June 2018):
https://caniuse.com/#feat=css-sticky
Hope it gets better soon.
A far simpler solution would be to use overflow-y:scroll and height: 100vh on the main-el container. This will give the appearance of fixed position to the side-el container without resorting to position: fixed.
You are saying you want position:fixed;-like behavior that plays together with flexbox. As mentioned in the accepted answer, applying this property to an element drops it out of the normal flow, so this isn't really possible.
If what you want is to have a fixed sidebar .side-el and a scrollable content box .main-el as the items of a flex container, here's how you might do this:
Disable scrolling in the flex container's parent; let's assume it's
<body>, as you don't provide div.container's parent. Also, hard-set
it's height to viewport-height (100vh) so that no part of the body's
box remains outside view (imagine the body's box normally extending
beyond your screen to contain the entire document; you don't want
that, if you are to disable the ability to move the viewport via
scrolling).
Set the flex container's (.container) height to that of it's parent.
Selectively re-enable scrolling for the content box (.main-el).
In CSS:
body{
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100%;
}
.main-el {
overflow-y: auto;
}
You can achieve this without position: fixed; by just adding overflow: auto; and height: 100%; to the flex-item that contains the long content:
.container {
display: flex;
}
.main-el {
padding:0 2em;
width: 70%;
overflow: auto;
height: 100%;
}
.side-el {
width: 30%;
}
<div class="container" style="background-color: blue; height: 300px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
I had the same issue, I actually just found a way to have flex-box, a width for the nav bar, and center it while in a fixed position.
nav {
display: flex;
height: 50px;
width: 90%;
left: 5%;
position: fixed;
}
I wanted to be able to have a flex-box nav bar in a fixed position but centered. So what I did was do the left 5% since that's equal to half of the 10% width left over. Try it out, it might help you! :)
How do I control the height of a flexbox so that it stays proportional to the width as the element grows?
I want the height of .inner to remain proportional to a given ratio as its width changes.
All examples of flexbox I've seen either holds the height constant when the width changes, or grows enough to contain its contents.
(haml)
.outer
.inner
%img
.inner
.inner
Perhaps the example will be helped if we include an image within it... or maybe not. just throwing an idea out there.
(sass)
.outer {
display: flex;
.inner {
flex: 1 1 auto;
}
}
There is no method specific to flexbox that would manage this.
There is well known padding-bottom trick that would permit this but it requires a pseudo-element (for preference) and an internal absolutely positioned div to hold the content.
Reference Web Link
As you will appreciate, absolute positioning is somewhat inflexible so laying out your content would be the main issue.
Applying this to flexbox:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer {
display: flex;
width: 500px;
margin: 1rem auto;
align-items: flex-start;
}
.inner {
flex: 1 1 auto;
border: 1px solid grey;
position: relative;
}
.inner:before {
content: "";
display: block;
padding-top: 100%;
/* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* otehr ratios */
.ratio2_1:before {
padding-top: 50%;
}
.ratio1_2:before {
padding-top: 200%;
}
.ratio4_3:before {
padding-top: 75%;
}
.ratio16_9:before {
padding-top: 56.25%;
}
<div class="outer">
<div class="inner">
<div class='content '>Aspect ratio of 1:1</div>
</div>
<div class="inner ratio2_1">
<div class='content'>Aspect ratio of 2:1</div>
</div>
<div class="inner ratio16_9">
<div class='content'>Aspect ratio of 16:9</div>
</div>
</div>