For my layout, I wanted a design with a header and footer that remained fixed at the top and bottom of the window, and content in between. That part was relatively simple to achieve.
However, I also needed the main content area to have its own header and footer, with a scrollable section for the remaining space if it overflowed.
Here is a mockup of what I have implemented so far:
If you're looking for a solution, try this:
.application-content, .content {
overflow: auto; /* Make scrollbars appear when needed */
flex: 1 1; /* Utilize available space (avoid using 100%) */
}
.application-body {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
}
.application-header {
background-color: #FFDDFF;
-webkit-flex: 0 0 45px;
-moz-flex: 0 0 45px;
-ms-flex: 0 0 45px;
flex: 0 0 45px;
}
.application-content {
background-color: #DDFFFF;
-webkit-flex: 1 1;
-moz-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
padding-left: 15px;
padding-right: 15px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.application-footer {
background-color: #FFFFDD;
-webkit-flex: 0 0 45px;
-moz-flex: 0 0 45px;
-ms-flex: 0 0 45px;
flex: 0 0 45px;
}
.content-header {
background-color: #FFFF22;
-webkit-flex: 0 0 25px;
-moz-flex: 0 0 25px;
-ms-flex: 0 0 25px;
flex: 0 0 25px;
}
.content {
background-color: #22FFFF;
-webkit-flex: 0 0 100%;
-moz-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.content-footer {
background-color: #FF22FF;
-webkit-flex: 0 0 25px;
-moz-flex: 0 0 25px;
-ms-flex: 0 0 25px;
flex: 0 0 25px;
}
.application-content, .content {
overflow: auto;
flex: 1 1;
}<div class="application-body">
<div class="application-header">
APP HEADER
</div>
<div class="application-content">
<div class="content-header">
CONTENT HEADER
</div>
<div class="content">
CONTENT
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="content-footer">
CONTENT FOOTER
</div>
</div>
<div class="application-footer">
© All rights reserved by TEST Ltd. 2015
</div>
</div>Is it possible for the DIVs to resize based on the size of the nested image? That's what I'm trying to accomplish. Within a main div, I have two nested DIVs - one with an image to the right and the other with text to the left. I want these DIVs ...
Sorting columns in jqgrid can be done by clicking on the column header, with the ability to set a default sort order upon loading. Icons for sorting are specified using: $grid.jqGrid({ viewsortcols: [false,'vertical',true], The sort icon an ...
As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...
Can you explain why inew2 and inew3 do not have a width of 100% of their parent div? https://i.sstatic.net/a4GEa.jpg html, body{ width: 100%; height: 100%; margin: 0px; padding: 0px; } .ibrands{ height: 120px; background-color: blue; } @media only scre ...
I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...
Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...
I recently discovered the versatility of using the REM unit for sizing elements, not just font sizes. It works really well in conjunction with the HTML font-size property. html { font-size:1vw } @media all and (max-width:720px) { html { font-size:10px ...
Trying to figure out how to achieve this - I want an image to change every 3 seconds using jquery. Can anyone help me with this? Unfortunately, I haven't been able to find any resources on this specific topic. ...
Struggling with creating responsive proportional rectangles for my gallery. It was working fine until I tried to center the text vertically, but couldn't figure out how to do it while maintaining proportional resizing. Any help or advice would be grea ...
I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...
I created my own spinner: '''' #spinner-bg-loading{ position: absolute; left: 50%; top: 25%; width: 80px; height: 80px; margin: -75px 0 0 -75px; border: 16px solid #FFFFFF; border-radius: 50%; border-top: 16px solid #1 ...
Having a minor issue with my dropdown menu. Whenever I hover over a link, the submenu pops out briefly but doesn't remain open. The issue seems to be related to the "content" div element, as removing it makes the menu functional. However, I can&apo ...
I am trying to incorporate a dropdown profile into my navbar, but it is not appearing where it should be located: pic1 <link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/j ...
Check out this code snippet on CodePen HTML <div class="boxes"> </div> <div class="hoverover"> hello </div> CSS .boxes { background-color: yellow; height: 100px; width: 200px; display: none; } .hoverover:hover .boxes { ...
Can someone help me create a button with a unique shape similar to the Products button on stack overflow? Check out this image for reference I attempted using border radius, but it didn't give me the desired effect. I searched for other options but c ...
http://jsfiddle.net/g54p4/ If you need to view the HTML and CSS, it's available on jsfiddle. <div class="box-input"> <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email"> </div> ...
JQuery Mobile has the capability to automatically apply CSS and HTML for elements on the page based on the presence of specific data- attributes when the page initially loads. However, if new HTML content is dynamically loaded onto the page after the JQue ...
I am working on creating a menu with dropdown-submenu functionality using CSS. .dropdown-menu { float:left; } .left-submenu { float: none; } .left-submenu > .dropdown-menu { border-radius: 6px 0px 6px 6px; left: auto; margin-lef ...
I'm a newcomer to Bootstrap and I want to create an image gallery. This is what I expect: https://i.sstatic.net/DKxMC.jpg However, what I'm getting looks like this: https://i.sstatic.net/KkrAG.jpg This is the HTML code I have so far: <div ...
Currently, I am in the process of developing a script that allows for image manipulation and saving. I have a main div where I set a background image, within which there is another div containing an image that can be manipulated (resized, rotated, and dra ...