I am trying to create the following layout using flexbox.
The upper black bar, the middle section and the lower black bar are all flexible elements that are children of the div wrapper only inside the body tag, which looks like this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'> <link href="~/Styles/bootstrap.min.css" rel="stylesheet" /> <link href="~/Styles/font-awesome.min.css" rel="stylesheet" /> <link href="~/Styles/ppt_site.css" rel="stylesheet" /> </head> <body> <div class="wrapper"> <div id="topRow"> </div> <div id="centralRow"> <div id="sidebarColumn"> </div> <div id="contentColumn"> </div> </div> <div id="bottomRow"> </div> </div> @Section['customScripts'] <script src="~/Scripts/siteGlobals.js"></script> <script src="~/requireconfig"></script> <script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"></script> </body> </html>
The style sheet that governs all this is as follows
.wrapper, html, body { height: 100%; margin: 0; } .wrapper { display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #topRow { background-color: black; color: white; } #centralRow { -ms-flex: 1; -webkit-flex: 1; flex: 1; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } #bottomRow { background-color: #333333; color: white; } #sidebarColumn { background-color: #B83B1D; color: white; } #contentColumn { -ms-flex: 1; -webkit-flex: 1; flex: 1; background-color: #F7F7F7; color: black; padding: 10px; overflow-y: auto; }
As for the main layout, all this works great, you will notice that if you look at the image, the red sidebar is like the area at the top with a yellow border.
In this area, there is destined to be a div that stretches the entire height of the red area (sidebar column) in the CSS above, but I try as best I can, I can not get it to do what I need.
Ideally, I want it to be a div, which was a flex container, which I can then put 4 flex items on and each of them takes up a quarter of the space available to everyone, but since the div with the yellow border cannot seem like the height of the parent container (red the sidebar, which is the most flexible), then it only ever takes up the height of the space around it.
I tried wrapping it in more divs and putting those divs, I wrapped extra flexible boxes in further divs, I tried blocks, inline rows, cell tables and almost everything I can think of.
No matter what I try, I just can't make the container with the yellow border have the same height as the parent.
Any ideas anybody?
Update (the next morning)
The 2 proposed solutions really work on their own, and they work the way I expected them.
In my particular case, however, they do not work.
I use NancyFX with this super simple viewer and I use KnockoutJS to compose the “web components”, so I can keep my parts reusable.
If I edit my “Master Template” and paste the div directly into the markup below #sidebarColumn, I get 4 divs of equal size as desired.
However, what really needs to happen is this: my template looks like this:
<div class="wrapper"> <div id="topRow"> @Section['topbarContent'] </div> <div id="centralRow"> <div id="sidebarColumn"> @Section['sidebarContent'] </div> <div id="contentColumn"> @Section['bodyContent'] </div> </div> <div id="bottomRow"> @Section['bottombarContent'] </div> </div>
If I remove the "@Section ['sidebarContent']" and put the divs directly in them.
If I put the div directly on my page that uses the template as follows:
@Master['shared/ppt_layout.html'] @Section['topbarContent'] <toptoolbar></toptoolbar> @EndSection @Section['sidebarContent'] <div>aaa</div> <div>aaa</div> <div>aaa</div> <div>aaa</div> @EndSection @Section['bodyContent'] <h1>Body Content</h1> <p class="lead">I am the test page that uses a wide sidebar component</p> <p>If you notice however, I also have a top toolbar with title added to me, and a footer bar.</p> <p>We all use the same template however....</p> @EndSection @Section['bottombarContent'] <footerbar></footerbar> @EndSection @Section['customScripts'] @EndSection
This also works, but if I put the markup in the knockout component, even direct divs work on the page, then I get the effect that I initially noticed.
So for some reason, adding content using knockout components is what causes the problem.
Even if I try to build a new flexible layout inside the component, nothing works vertically, horizontally, but everything works fine.
The footer, for example, is divided into left and right sections without any problems, but the vertical alignment is simply canceled.