I'm trying to achieve a website design which basically has two parts. The top-part, where the menu of the site is and the content-part, with the information.
.wrap {
position: absolute;
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: column;
height: 100%;
}
.top {
flex: 0 1 auto;
}
.content {
flex: 1;
position: relative;
height: 100%;
}
<div class="wrap">
<div class="box">
<div class="top"></div>
<div class="content"></div>
</div>
</div>
The menu-div should be as big as needed for the menu-content to be displayed and the content-div should fill the rest of the site. Both together should fill 100% in width and 100% in height.
So, this construct works fine on desktop PCs, however - on mobile browsers for Chrome, Firefox, and Safari, the site's height gets extended by the menu's height.
The content is at 100% plus the menu. Can someone please explain to me what I'm doing wrong here?
The Basics
In order to give elements percentage heights, their parents need a defined height. What can be confusing, is that these parents include <html> and <body> Consider this example:
html,body {
height: 100%;
margin: 0;
}
div {
height: 100%;
background: lightgreen;
}
<div></div>
Here the <html>, <body> and <div> elements have both been given height: 100%. This trickles down to each child element:
<html> is 100% of the browser viewport
<body> is 100% of its <html> parent
<div> is 100% of its <body> parent
We can simplify this and give the <body> element 100% height using a viewport height unit. This reduces complexity as we no longer need to worry about <html>. Consider this example:
body {
height: 100vh;
margin: 0;
}
div {
height: 100%;
background: lightgreen;
}
<div></div>
Here the <body> takes up 100% of the viewport height and its children can be given percentage heights. We don't need to define a height for <html>.
What You Want to Achieve
With this in mind, we can strip your example down to the basics. Here is exactly what you have described using as few elements as needed:
The <body> can be the flex container. It gets:
display: flex and flex-direction: column
margin: 0 to remove the default body margin.
height: 100vh to stretch it to 100% of the viewport height.
The <div class="top"> is your header that will contain your menu. We don't need to give it a flex property as it will shrink to fit its contents with the initial flex values it is given.
The <div class="content"> is given flex: 1 to grow and fill the rest of the available space.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.top {
background: pink;
}
.content {
flex: 1;
background: lightgreen;
}
<div class="top">Menu Content<br>Menu Content<br>Menu Content</div>
<div class="content"></div>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I am trying to make a right hand menu with is always the same number of pixels wide and stretches too the bottom of the screen. To the left of that I want a div which fills up the rest of the space. The picture of what I have is shown here:
The HTML and CSS I am trying out are something like this:
<div class=App>
<div class=Content>
More Test
</div>
<div class=Menu>
Just Test Text
</div>
</div>
.App {
text-align: center;
display: flex;
width: 100%;
height: 100%;
}
.Menu {
background-color: #080;
flex: 0 0 200px;
}
.Content {
background-color: #f00;
flex: auto;
}
Here is a link to a working version of the simple page:
https://jsfiddle.net/tpjsaogx/
Your height: 100% needs a reference height - the parent elements html and body won't have any height by themselves. So add this rule:
html, body {
margin: 0;
height: 100%;
}
Here's your fiddle adapted accordingly: https://jsfiddle.net/3ck7dypo/
And here's the same code in this snippet:
html,
body {
margin: 0;
height: 100%;
}
.App {
text-align: center;
display: flex;
width: 100%;
height: 100%;
}
.Menu {
background-color: #080;
flex: 0 0 200px;
}
.Content {
background-color: #f00;
flex: auto;
}
<div class=App>
<div class=Content>
More Test
</div>
<div class=Menu>
Just Test Text
</div>
</div>
It's all about relative units. height:100% means that this element will take 100% height of its parent. In your case, since <div class="App"> is the first parent, setting it to 100% height isn't really doing anything. To stretch it to both boxes till the end of the page, all you need to do is give <div class="App"> a height of 100vh, where vh stands for viewport height. Essentially covering the whole height of the page. You can learn more about css units from MDN here
I have the following code where I want to make the 2 div tags take up all the available height the browser offers.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.left {
height: 100%;
display: block;
width: 50%;
background-color: green;
overflow-y: scroll;
}
.right {
height: 100%;
background-color: red;
display: block;
width: 50%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
<div class="right">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
</div>
</body>
</html>
I have decided to do this setting height:100%, but this disables the individual scrollbars of the divs - does anyone know how to make the scrollbars work and having the divs take up the height of the browser? (I don't want to hardcode something like height: 700px)
I'm assuming that by "take up all the available height the browser offers" you mean you want the divs to take up 100% of the viewport. The reason this is not happening in your code is that you have only set the height of the divs to 100%. This means they will take up the full height of their parent element, .container, but you have not set the height of that element (or the height of its parent, body, or the height of its parent, html). You need to set the height of all three of those elements.
In addition, I would explicitly set the margin on body. If you do not, then it defaults to 8px in Firefox, Chrome, and Edge, but it may default to some other number in older versions or other browsers. If you set the margin to 0, then for html and body you can set the height to 100%. If you want the margin of body to be 8px or some other non-zero number, then you need to account for that in the height of html and body. (e.g. height: calc(100% - 8px).
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.left {
height: 100%;
display: block;
width: 50%;
background-color: green;
overflow-y: scroll;
}
.right {
height: 100%;
background-color: red;
display: block;
width: 50%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
<div class="right">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
</div>
</body>
</html>
I have an image in a flex container (let's call it child).
The container itself has flex: 1 because it also belongs to a flex parent with flex-direction: column and child behaves as expected (takes 100% height of parent) before introducing the image situation.
On adding an image to child, the image extends child to accommodate its height, effectively child pushing parent.
Using object-fit: cover on the image could not help in this situation!
Looks like this is normal behaviour in Chrome, Firefox, and Safari.
Here's the weird part tho: adding a height property to child fixes the issue on Chrome and Safari but not Firefox. This height's value doesn't matter much as long as it's not greater than the computed height of child - child is contained to 100% height of parent together with the image - even if the height value of child is set to 1px. Surprisingly height: 100% on child doesn't produce the same behaviour.
Any ideas around this will be much appreciated. My goal is to make the image always take up 100% of child - regardless of the width of the viewport.
Here's some code for illustration
#parent {
height: 100vh;
display: flex;
flex-direction: column;
}
#child {
flex: 1;
height: 1px;
/* the weird hack for chrome and safari - ff ignores it */
}
#child img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
</div>
I also added some images for more context. These are crops of the entire page. The first image is from a smaller viewport (width shared with devtools) and the second from the entire page (devtools hidden). The second image shows that the image has extended child to eventually push the container with a green background beyond the fold - causing a scrollbar to appear.
child is the image wrapper, and parent is the component with a white background and some padding. You realize parent has a sibling (green background) and their parent (container with a green border and border radius) has a display: grid and grid-template-rows: 1fr auto;.
It should also be noted that the most top-level element has a height of 100vh and all its children are rendered within that. Essentially there should not be a scrollbar.
I hope you get the idea.
Is this what you are looking to do?
You can also see it here: https://codepen.io/teanbiscuits/pen/GRJmPgo
#parent {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
border:2px solid green;
border-radius:20px;
overflow:hidden;
}
#child {
position:relative;
}
#child img {
position:absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
#text {
background-color:green;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
<div id="text">
<h2>some title here</h2>
<p>Some description here</p>
</div>
</div>
Please try this. Just select preferred object-fit.
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#parent {
height: calc(100vh - 20px);
display: flex;
padding: 10px;
flex-direction: column;
}
#child {
flex: 1;
text-align: center;
overflow: hidden;
}
#child img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div id="parent">
<div id="child">
<img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
</div>
<div id="text">
<h2>Some title here</h2>
<p>Some description here</p>
</div>
</div>
I'm facing a strange issue that might have link with flexbox misbehaving with max-height, but so far I didn't find any pure css solution.
I made a plunker to summarize the problem. If you resize your window to reduce its height, at some point you should have a scrollbar in the first block, but if you get back to a higher height, even if there is enough space, the scrollbar won't disappear unless you put your mouse over it (which feels very bugy) : https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview
I have a main container (in flex) containing 2 blocks (also in flex).
The main container has its height set to 100%, allowing it to resize itself following the window size.
Both children have a fixed content and an overflow-y set to auto.
The first child has a max-height in % to let more height to the second child.
The issue seems to come from this max-height rule. If you remove it, then there's no problem, but I need this max-height...
I don't want to use something like:
.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }
because it would make my first block higher than its content depending on the window size. I want the first block to have at most its content height.
So my question is: Is it an implementation issue in many browsers (maybe all, but I only tested it in Chrome, IE10 and IE11), or is something wrong in my logic ?
Thank you.
UPDATE: I used a fixed height for my content in this example, but in my project it's a list of n elements in it. So I can't really set my max-height with px value.
UPDATE2: I can't use vh in .max max-height property because it takes 100vh as 100% of viewport height (basically your browser window height). But in my context, .main is already in other containers. Those containers have already their heights defined and are smaller than my window height.
/* Styles go here */
html {
height: 100%;
}
body {
height: calc(100% - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 2 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
</body>
</html>
It is a bug, in Chrome, a test in FF and Edge, it works fine.
Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.
Another way, as in below sample, is to change the 100% in height: 100% to 100vh.
I guess this works better because viewport units like vh is a fixed unit, which percent is not.
Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview
html {
height: 100vh;
}
body {
height: calc(100vh - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 1 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
Yes it feels buggy. If you increase the height of the window the height of the first box does not get updated unless:
you decrease the height again
"put your mouse over it" (did not quite get your meaning here)
IMHO this is a browser bug.
If you set flex-grow to anything greater 0 for the first box, the height gets updated correctly, if you increase the height of the window (as you would expect) But using flex-grow isn't an option as the box could potentially grow bigger than its content.
Rather than using max-height:40% you should use the exact same height as you use for .content and use flex-grow: 1 as well to circumvent the "browser bug"
I have 2 divs that are placed on top of each other. For purposes of alignment, I am using display: flex and flex: column on the div containing these two divs. However, the first div uses the "height 0 padding" trick for videos. The problem I'm having, is that when using flex: column and change the width of the screen, the height doesn't change (and I want the height to change so that it matches the ratio for the video). What ends up happening is that the div stays the same, and the video shrinks within it and it looks ugly because there is extra background.
Plunker: https://plnkr.co/edit/TaeF5f8VufJWPU3GRZPr?p=preview
(in short, I want it such that when I change the width of the browser, the red div's height gets smaller)
CSS
/* Styles go here */
body {
height: 100%;
}
.container {
height: 80vh;
display: flex;
flex-flow: column;
}
.video {
flex: none;
height: 0;
padding-bottom: 30%;
background-color: red;
width: 80%;
}
.next-content {
flex: 1 0 auto;
width: 80%;
background-color: blue;
}
HTML:
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="video"></div>
<div class="next-content"></div>
</div>