Say we have the following layout structure
<div class="full-height>
<nav>....</nav>
<section class="hero>...</section>
</div>
<section class="other-content>....</section>
.full-height {
height: 100vh;
display: flex;
flex-direction: column;
.nav {
padding: 2rem 5rem;
}
.hero {
background-image: .....;
background-size: cover;
flex: 1;
}
}
I want the nav and .hero sections to initially take the full height of the viewport, but when I resize the browser, it should make room for the other section to come in below it.
If I wrap nav and .hero within a parent div and set that divs height to 100vh, it works as expected, but it will always take 100% height of the viewport on resize.
Related
I have a "boxHeader" which height is fixed to 64px and a "boxcontent" which I want height to be fixed to the remaining space.
My problem: if the height of the children in the "boxContent" exceed the height of the remaining space, it will also increase the height of "boxContent". And I don't want that, I want the children of "boxContent" to respect the max size (and add scroll)
Edit: The children inside "boxContent" are React Components, I have a "Sider" of Ant Design containing multiple Panel's Collapse AND I have a Content side by side. I want to add a scroll bar on the Sider AND on the Content so both Sider and Content have overflow-y: auto
Can you help me ?
Here the code
<div id="container">
<div id="boxHeader">
<HeaderArea />
</div>
<div id="boxContent">
{...}
</div>
</div>
#container {
display: flex;
flex-flow: column;
height: 100% !important;
min-height: 100% !important;
#boxContent {
/* height: calc(100vh - 64px); this works, but i don't want to calcule the size*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
#boxHeader {
flex: 0 0 64px;
}
body{
height: 100vh; /*100% is also tested*/
}
You can give #boxContent max-height and overflow-y: scroll with these two I think it is going to work. But If it is not can you add your HTML so that I can look and fix it. I hope this line of code fixes your problem.
#boxContent {
max-height:300px; //(for example)
overflow-y: auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
Here is the minimal reproducible example:
body {
margin: 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 100%; /* has to be 100%, no px or em heights */
}
div img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
<div>
<img src="https://dummyimage.com/300x225/000/fff" srcset="https://dummyimage.com/300x225/000/fff 600w, https://dummyimage.com/768x568/000/fff 768w">
</div>
The problem I have is that the image stretches beyond it's natural dimensions and I need to prevent that.
The aim is to:
Parent element of the image in full width and height
Image can't be as background-image (SEO)
Image can't have fixed width and height
Looking only for CSS solutions.
I would like the header and the slideshow (the top two elements of my site) to fit 100% of the screen size, no matter what the screen size is. I have tried using 100vh, however once you open the site on mobile the viewport size does not account for the address bar and page controls. Because of this I am now trying to use flex combined with height:100%, however this is not working either.
Here is an example of what I'm tying to get- https://www.rebag.com (the header and slideshow always perfectly fit the screen no matter what screen size)
.slide-head-wrapper {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.header-top-bar-wrapper {
height: 167px;
display: flex;
flex-direction: column;
justify-content: center;
}
.slide-connected {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
html,
body {
height: 100%;
}
<div class="slide-head-wrapper">
<div class="header-top-bar-wrapper">
///HEADER CODE GOES HERE////
</div>
<div class="slide-connected">
///SLIDER CODE GOES HERE////
</div>
</div>
I've got a calendar div (that actually has height and width set to 100vh and 100vw to be fullscreen) containing a header and an actual calendar.
I use flex because I want the header to have a specific height, and the contained calendar to take all the vertical space it has left.
rbc-calendar is actually an external library I use (React Big Calendar) which uses flex on its own to scale the rows. I've put the main div css in case it comes in relevant.
I want my calendar container to have a background image. So only for the calendar itself, not the header. I want this image to be scaled down until the height (width) fits the calendar's height (weight), keeping the image's aspect ratio and letting it overflow for the same amount on right/left (top/bottom).
Background-image: cover seems to be what I'm looking for, but for some reasons the image does not get scaled down at all.
.calendar {
height: 333px;
width: 333px;
display: flex;
flex-direction: column;
}
.calendar-header {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: lightblue;
}
.calendar-container {
flex: 1;
background-size: cover;
background: #000 url('https://www.chenhuijing.com/slides/29-constellation-2018/img/meme1.jpg') no-repeat center center;
}
.rbc-calendar {
height: 100%;
display: flex;
align-items: stretch;
}
<div class="calendar">
<div class="calendar-header">
<h1>Not working calendar</h1>
</div>
<div class="calendar-container">
<div class="rbc-calendar">
</div>
</div>
</div>
Answer in the question's comments by Temani-afif : setting background after background-size overrides the statement.
I have a simple wrapper with 2 div elements in it.
I want the first one to gain 85% of the height and the second one to gain only 15% of the height.
It works when I set a fixed height to the wrapper. Though sadly my wrapper has a dynamic height.
Do you know how I can accomplish this?
I have also provided a plunker: http://plnkr.co/edit/HQpahfmRasij8Zougjkn?p=preview
Code:
.outer{
flex: 1;
display: flex;
flex-direction: column;
flex-basis: 0;
/* if i set the fixed height everthing works
though i do want a dynamic height
height: 800px; */
}
.main {
background-color: blue;
display: flex;
flex: 0 0 85%;
max-height: 85%;
flex-direction: row;
height: 400px;
}
.navigator {
background-color: red;
display: flex;
flex: 0 0 15%;
max-height: 15%;
flex-direction: row;
height: 400px;
}
<div class="outer">
<div class="main" >
<!-- this container should have 85% of the outer containers height -->
</div>
<div class="navigator" >
<!-- this container should have 15% of the outer containers height -->
</div>
</div>
You can do the initial (outer) layout without flex, as I can't see the point when it's not needed.
The requirement is the same though, that the .outer's parent need a height, either inherited or set.
html, body {
height: 100%;
margin: 0;
}
.outer {
height: 100%;
}
.main {
background-color: blue;
height: 85%;
display: flex; /* this is for main's children */
flex-direction: row; /* this is for main's children */
}
.navigator {
background-color: red;
height: 15%;
display: flex; /* this is for nav's children */
flex-direction: row; /* this is for nav's children */
}
<div class="outer">
<div class="main" >
<!-- this container should have 85% of the outer containers height -->
</div>
<div class="navigator" >
<!-- this container should have 15% of the outer containers height -->
</div>
</div>
You can try sizing the flex items with flex-grow instead of flex-basis or height.
In the following example, one flex item will occupy 85% of the available space in the container. The other flex item will take the remaining 15%.
HTML (no changes)
CSS
.outer {
display: flex;
flex-direction: column;
}
.main { flex-grow: 85; }
.navigator { flex-grow: 15; } /* flex-grow: 1 would work as well */
Revised Plunkr
Learn more about flex heights here: Heights rendering differently in Chrome and Firefox
if they are direct childs of body, then you first need to set height on patrents : html & body in order to have an inheritable value.
then outer is no longer needed, body is there already.
Set height to the smallest (and eventually a min-height) and request the other to grow via just : flex:1;.
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.main {
flex: 1;
background: tomato;
}
.navigator {
height: 15%;
min-height: 2em;
background: lime;
}
<div class="main">
<!-- this container should have 85% of the outer containers height -->
main
</div>
<div class="navigator">
navigator
<!-- this container should have 15% of the outer containers height -->
</div>
http://plnkr.co/edit/R502OvyV2RR8GZ96UJvt?p=preview
comment pulled up here :
#JuHwon then, does the parent has a known size that it can be
inherited.
could you set up an example that shows your trouble.
% values need a reference to calculate a ratio from it, within flex imbrication height should be usable or something like
flex:85; & flex:15; http://codepen.io/gc-nomade/pen/pgOjXB