I'm trying to make a base layout with a left-side menu, right-side content and a top header that scrolls with the page. The content on the right side should also scroll with the main scrollbar.
My (for me unsolvable) problem starts, when I want the left side to be full size (height 100%) because in some cases i want to subtract the header from this.
With this example (https://jsfiddle.net/5q42xvwu/) it is easier to explain. I just want to have the text "TOP SIDER" and "BOTTOM SIDER" always on the screen regardless of whether the header is on the screen or not. So the left side should change the size depending on whether the header is on visible.
I don't know if and how this is possible with CSS. I already know that it is easily possible with JS.
I hope someone can help me with this problem, I already wasted several hours with this. Thank you :)
Here the code (in the fiddle):
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top:0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div>TOP SIDER</div>
<div>BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<!-- SIMULATE A LAGE CONTENT PAGE-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
END OF MAIN CONTENT
</div>
</div>
</body>
</html>
Edit to further clarify:
The two inner <div> are only there to represent the top and the lower part of the "Inner Sider". In the real example instead of the ".inner-sider" there should be a full hight menu.
Added classes and sticky positioning to top and bottom siders. Hope it does not break your content layout!
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top: 0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* new styles below: */
.inner-top {
position: sticky;
top: 0;
}
.inner-bottom {
position: sticky;
bottom: 0;
}
<html>
<head>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div class="inner-top">TOP SIDER</div>
<div class="inner-bottom">BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>END OF MAIN CONTENT
</div>
</div>
</body>
</html>
Related
When creating my dashboard with flexbox css html, I have a scroll problem for example:
In the middle red container if I make it vertical the horizontal one does not work well for me opteniendo results like it expands the container descuadrando the design.
If I work the horizontal scroll does not work the vertical scroll expanding this.
I want it to work like this in the following image:
Desired result
I have tried many things with the flexbox like setting the height or width to 100% and even forcing the scroll, but I can't get the expected effect.
Your question is a bit broad, you should post your current solution next time to see which part is not working. For example, I couldn't really tell if the vertical scrollbar in the middle region is supposed to scroll the top or the middle part. Anyways, if you're set on using flexboxes, here's a way to do it:
body {
margin: 0;
}
main {
display: flex;
width: 100vw;
height: 100vh;
}
.left {
width: 20%;
background-color: cornflowerblue;
}
.left__header {
background-color: lightblue;
}
.middle {
display: flex;
flex-direction: column;
width: 40%;
background-color: salmon;
}
.middle__header {
flex-shrink: 0;
overflow-y: auto;
background-color: lightpink;
}
.middle__body {
overflow-x: auto;
}
.middle__footer {
margin-top: auto;
background-color: white;
}
.right {
width: 40%;
background-color: lightgreen;
}
<main>
<div class="left">
<div class="left__header">1</div>
<div class="left__body"></div>
</div>
<div class="middle">
<div class="middle__header">
<!-- Fixed width to simulate overflowing content -->
<div style="min-width: 2000px">1 2 3 4 5</div>
</div>
<div class="middle__body">
<!-- Fixed height to simulate overflowing content -->
<div style="min-height: 2000px">Content</div>
</div>
<div class="middle__footer">
Pia de Pagina
</div>
</div>
<div class="right">
SideBar Right
</div>
</main>
But if you don't plan on dynamically adding/removing elements or moving stuff around in the base layout (i.e. these regions stay the same during the use of the application) I'd recommend using CSS grid instead:
body {
margin: 0;
}
main {
display: grid;
grid-template:
"left-header middle-header right" min-content
"left-body middle-body right"
"left-body middle-footer right" min-content / 2fr 4fr 4fr;
width: 100vw;
height: 100vh;
}
.left__header {
grid-area: left-header;
background-color: lightblue;
}
.left__body {
grid-area: left-body;
background-color: cornflowerblue;
}
.middle__header {
grid-area: middle-header;
overflow-x: auto;
background-color: lightpink;
}
.middle__body {
grid-area: middle-body;
overflow-y: auto;
background-color: salmon;
}
.middle__footer {
grid-area: middle-footer;
background-color: white;
}
.right {
grid-area: right;
background-color: lightgreen;
}
<main>
<div class="left__header">1</div>
<div class="left__body"></div>
<div class="middle__header">
<!-- Fixed width to simulate overflowing content -->
<div style="min-width: 2000px">1 2 3 4 5</div>
</div>
<div class="middle__body">
<!-- Fixed height to simulate overflowing content -->
<div style="min-height: 2000px">Content</div>
</div>
<div class="middle__footer">
Pia de Pagina
</div>
<div class="right">
SideBar right
</div>
</main>
This results in the same output, but the HTML/CSS is much more readable IMO. It uses the grid-template property, which is fairly new, but should be available in most browsers.
image wireframe
I would like to recreate messaging phone app in html and css. So the app must be full frame without any overflow.
The trick is the bottom part (in red) must be resizable according to the child content. So I used flex (with flex-direction: column) to manage my layout.
The problem is : when the content (in yellow) grow up, the core part will compress the red part. My goal is to overflow, with a scrollbar, the content inside the core part and don't change the size of the red div.
index.html
<body>
<div id="header">
</div>
<div id="core">
<div class="conainer" style="">
<div class="row">
<div class="two columns"></div>
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
</div>
<div class="row">
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
<div class="two columns"></div>
</div>
</div>
</div>
<div id="footer">
</div>
index.css
html, body, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
background: #2A9D8F;
flex: 0 0 auto;
}
#core {
background-color: #264653;
flex: 1;
display: flex;
align-items: flex-end;
}
#footer {
height: auto;
background-color: red;
min-height: 50px;
flex: 0 0 auto;
}
.conainer {
flex: 0 0 100%;
}
.row {
margin: 5px;
background-color: yellow;
height: 130px;
}
https://codepen.io/jln_brtn/pen/pobVZBv
Best regards and thank you for your help.
I'm not sure if I understand the problem correctly but since your .row elements have a fixed height: 130px, the element should not be able to grow any further. Overflow styling to .row elements can be added like this:
.row {
overflow-y: scroll;
}
If it is just the #core element, then you can do something like this:
#core {
overflow-y: scroll;
}
For this instance I would suggest to use CSS Grid instead of Flexbox, and giving both <header> and <footer> the space they need, while the <main> gets the rest. This means that both <header> and <footer> stay were they are, even if <main> needs more space for its content, meaning <main> will get a scrollbar.
You can achieve the same by using position: fixed and setting a margin to top and bottom, with fixed heights of <header> and <footer>, and sizing <main> with height: calc(100% - HEIGHT_OF_HEADER - HEIGHT_OF_FOOTER). The problem with this is maintenance, as you would always have to check and revalidate the heights when changing something.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
height: 3.125rem;
background: #2A9D8F;
}
main {
padding: 0.3125rem;
display: flex;
flex-flow: column;
gap: 0.3125rem;
background: #264653;
overflow: hidden auto;
}
footer {
height: 3.125rem;
background: red;
}
main > div {
flex-shrink: 0;
height: 8.125rem;
background: yellow;
}
<header></header>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<footer></footer>
I am just facing a super weird problem. My actual goal was to build a scrollable flex-box content box between two sidebars (left and right) for an angular app. First I did a prototype in an html and it works fine! But then I started to implement it inside the app and the elements don't behave the same. In order to debug the problem, I replaced the elements and styles with exact the same tags and css styles, from my html-file, but it still doesn't look the same.
How it looks with the html-file
The sidebars have a full height
The centered content box has a vertical and horizontal scroll section.
This is the outcome of the angular app
The height of the sidebars don't stretch over the full height.
the centered box has ONLY a horizontal scroll section.
The padding of the container seems to have an effect of the .boxsidebar, because the .boxsidebar is not sticking on top (like in image 1).
Here is the code, which is used for both solutions. In the angular app, the html is added in the app.component.html and the style in app.style.scss:
<head>
<style>
body{
margin: 0;
}
.boxsidebar{
display: inline-block;
width: 25%;
height: 100%;
background-color: blue;
}
.container{
display: inline-block;
width: 74%;
}
.map{
display: inline-flex;
-webkit-flex-flow: column;
flex-flow: column;
height: 100%;
width: 74%;
box-sizing: border-box;
padding: 16px;
}
.toolbar{
width: 100%;
height: 100px;
background-color: chartreuse;
}
.sidebar{
display: inline-block;
width: 25%;
height: 100%;
background-color: blueviolet;
}
.wrapwrap{
min-height: 0;
flex: 1;
overflow: auto;
}
.someBigStuff{
background-color: aquamarine;
height: 2000px;
width: 2000px;
}
</style>
</head>
<div class="box">
<div class="boxsidebar">
<h3>Hello</h3>
<div class="sidebar_content">
</div>
</div>
<div class="container">
<div class="map">
<div class="toolbar">Hello</div>
<div class="wrapwrap">
<div class="someBigStuff"></div>
</div>
</div>
<div class="sidebar">
<h3>Hello</h3>
<div class="sidebar_content">
</div>
</div>
</div>
</div>
Final hint: I unchecked every additional style in the css-inspector window, so that both pages have the same base.
Thank you for your time and help!
I'm trying to create a footer but when ever I open my console view on Chrome the footer comes up along with the console. I've looked at many other people having the same issue but they fixed it by setting the position of the footer to fixed or absolute, but when I try both I still get the same result.
Threads I've looked at:
Footer goes up whenever i open Chrome Console
How do you get the footer to stay at the bottom of a Web page?
Here is what my CSS looks like currently:
html,
body {
height: 100%;
min-height: 100%;
}
.footer {
width: 100%;
bottom: 0px;
left: 0px;
height: 100px;
position: fixed;
background-color: #727272;
}
.footer p {
color: white;
}
<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>
the wrapper class only creates margins on the left and the right.
Here's how to make your footer always stay down, without using position:fixed, using your example:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
flex-grow: 1;
}
.footer {
flex-grow: 0;
background-color: #727272;
}
.footer p {
color: white;
}
<body>
<div class="main">
put your content here...
</div>
<div class="footer">
<div class="wrapper">
<p>testing</p>
</div>
</div>
</body>
A complete and semantically correct layout would be:
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
<html>
<head></head>
<body>
<header>
Your header here
</header>
<main>
Your content here
</main>
<footer>
Your footer here
</footer>
</body>
</html>
The <footer> and <header> will take the space they need but not more. <main> grows in the remaining space. When <main> needs more than the available space, it pushes <footer> down.
I'm trying to create the following basic layout:
And I'm currently using the following basic HTML markup (with slightly different class names and additional markup within each of the HTML elements):
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">
</div>
<div class="purpleSection">
</div>
<div class="pinkSection">
</div>
<div class="redSection">
</div>
</div>
<div class="rightOrangeStrip">
</div>
</div>
</div>
<div class="lightPurpleContent">
</div>
</div>
And then the following starting CSS for the markup above:
.sidebar {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: 0;
width: 300px;
}
.topGreenStrip {
height: 5px;
justify-self: flex-start;
}
.sidebarContainer {
flex-grow: 1;
justify-self: stretch;
}
The problem I'm having though is that because I start by stretching everything vertically with flexbox, I don't know how to then stretch things horizontally but still keep everything 100% the height of the screen.
That is, minus the 5px green top strip, I want the rest of the sidebar to occupy 100% the height of the screen. The large pink section should fill in whatever the brown, purple and red sections don't naturally.
I was able to get that part working without the orange bar by using justify-self: flex-start;, justify-self: stretch; and justify-self: flex-end;. However, once I add the orange bar in, I don't know how to keep doing what I'm doing.
The orange bar has a bit of dynamic content in it, so I can't set a static width, and the brown, purple, pink and red sections should use whatever width is not taken up by the orange bar (I'm assuming with flex-grow: 1;).
Anyway, how do I get this layout where (within the sidebar), I'm trying to stretch things both to 100% the height and 100% the width? Can I do this with just flexbox, or am I going to have to used positioned/floated elements to get this all to work?
Sorry for the vagueness, but after trying several things and getting nowhere close, I'm not sure where to begin. Thank you.
You need to make use of flex-direction: column on certain elements to stack the children. Also, using flex: 1 will force that element to grow and fill available space in it's parent.
By setting height: 100% on the html and body you can stretch .siteContainer to be the full height of the window.
I've added the background colours so you can see the layout in action.
html,
body {
margin: 0;
height: 100%;
}
.siteContainer {
display: flex;
height: 100%;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
}
.topGreenStrip {
height: 5px;
}
.sidebarContainer {
flex: 1;
display: flex;
}
.sidebarInnerContainer {
display: flex;
flex-direction: column;
flex: 1;
}
.pinkSection,
.lightPurpleContent {
flex: 1;
}
.topGreenStrip { background: green; }
.brownSection { background: peru; }
.purpleSection { background: darkviolet ; }
.pinkSection { background: pink; }
.redSection { background: red; }
.rightOrangeStrip { background: orange; }
.lightPurpleContent { background: lavender; }
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">green
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">brown
</div>
<div class="purpleSection">purple
</div>
<div class="pinkSection">pink
</div>
<div class="redSection">red
</div>
</div>
<div class="rightOrangeStrip">orange
</div>
</div>
</div>
<div class="lightPurpleContent">lightpurple
</div>
</div>