I'm building out a UI that requires a fixed position/sticky element at the bottom of the viewport with a width constrained by a main content area. The main content area is optionally flanked by (sibling) left and/or right sidebars with fixed widths, so I'm using Flexbox to build the three column structure with flex-grow: 1 on the main content.
I've learned from #Marc Audet's accepted answer at How can I make a fixed positioned div inherit width of parent? that setting width: inherit on the fixed element is typically how to solve this problem, but it only seems to work when there's a specified width on its parent, which doesn't help me considering I need the main content area to fill the remaining width of the page.
Does anyone have any ideas for getting around this? Check out my Fiddle for the code/example. Any help would be appreciated!
CSS
html {
box-sizing: border-box;
font: 400 16px/1.45 'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
overflow-x: hidden;
}
body {
background: #121;
color: #FEF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100vw;
height: 100vh;
}
.container {
display: flex;
color: #fff;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
background: blue;
}
.left {
background: blue;
min-height: 100vh;
min-width: 150px;
flex-shrink: 0;
}
.middle {
background: green;
min-height: 100vh;
overflow: hidden;
width: calc(100vw - 400px);
padding-bottom: 60px;
flex-grow: 1;
flex-shrink: 0;
}
.middle .fixed-footer {
background: orange;
position: fixed;
bottom: 0;
width: 100vw;
width: inherit;
padding: 16px 0;
overflow-x: hidden;
}
.right {
background: blue;
min-height: 100vh;
min-width: 250px;
flex-shrink: 0;
}
#media screen and (min-width: 640px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
overflow-y: auto;
}
}
Added Star Wars ipsum content to demonstrate .middle's vertical flexibility and how .fixed-footer is stationary and is .middle's width.
DEMO
Related
The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}
you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)
I'm centering a div inside another div using percentage margins. I do this because the parent div is going to change sizes based on browser size.
See this jsfiddle for a demo.
My CSS:
#test-wrap {
position: absolute;
width: 400px;
height: 250px;
background-color: pink;
}
.white-wrap {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
left: 50%; margin-left: -25%;
top: 50%; margin-top: -25%;
}
This works fine in Safari, but in Chrome the child div is appearing higher than it should.
Perhaps there's a better way to achieve such a thing, that works on all browsers and doesn't rely on pixel margins? Any suggestions would be greatly appreciated!
You should use the attribute margin. So your CSS of white-wrap should be:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
This is my favorite way to accomplish this (works in all modern browsers and IE8+).
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
And here is a jsFiddle that mimics your example.
Try
#test-wrap {
display: table-cell;
width: 500px;
height: 500px;
background: gray;
vertical-align: middle;
text-align: center;
}
.white-wrap {
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
You should set those properties too :
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Once you defined a size for a DIV or anything else, the margin, padding and everything will be in the sizing and won't increase the size.
I have a page that needs to stretch and resize with with window and I've managed to do that but I need that the "inner div" (#pgContent) stretch if the window is resized to higher dimensions but that it doesn't shrink more than, let's say for example 800 x 600 px.
As I have it now it stretches well but it also shrinks more than I want!
It's working as I want in width but not in height!?
Here's a visual example:
My CSS:
* {
margin: 0;
padding: 0;
outline: 0;
}
/*| PAGE LAYOUT |*/
html, body {
height: 100%;
width: 100%;
/*text-align: center;*/ /*IE doesn't ~like this*/
cursor: default;
}
#pgWrapper {
z-index: 1;
min-height: 100%;
height: auto !important;
/*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
#pgContent {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 50px;
overflow: hidden;
background: #CCC;
}
#footWrapper {
z-index: 2;
height: 50px;
min-width: 940px;
position: absolute;
left: 30px;
right: 30px;
bottom: 0px;
background: #C00;
}
/*| END PAGE LAYOUT |*/
And the HTML:
<body>
<div id="pgWrapper">
<div id="pgContent">
This DIV should stretch with window but never lower than for example 800px x 600px!<br />
If window size is lower then scrollbars should appear.
</div>
</div>
<div id="footWrapper">
<div id="footLft"></div>
<div id="footRgt"></div>
</div>
</body>
If someone could give me a help on this I would appreciate.
Thanks in advance.
The second min-height will overwrite the first one.
Use a height of 100% and min-height of 680px;
#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
I belive height auto is messing with your stretching, commenting it out made your styles behave much better. Of course it might be down to different browsers
#pgWrapper {
z-index: 1;
min-height: 100%;
/*height: auto !important;*/
min-height: 680px;
/* THIS SHOULD WORK BUT IT DOESN'T */
height: 100%;
min-width: 1000px;
width: 100%;
position: absolute;
overflow: hidden;
text-align: center;
background: #000;
}
Working sample:
http://jsfiddle.net/QqMeC/4/
Have you tried using the following in #pgWrapper
overflow: auto;
DEMO: http://jsfiddle.net/jonocairns/LA8hg/
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212
I'm trying to create a div containing 3 different divs: the header, the content and the footer. The header and the footer have fixed div and are positioned on the top and on the bottom of the container div. The content should fill the remaining available space and dynamically adapt when the container div is resized, with an overflow: auto and a max-height corresponding to the remaining space of the container.
How can I achieve this behavior ?
#container
#header
#body
#footer
#container {
display: table;
height: 300px;
width: 300px;
}
#container #header {
background: #888;
height: 30px;
width: 100%;
display: table-row;
}
#container #body {
background: #777;
display: table-row;
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}
#container #footer {
background: #888;
display: table-row;
height: 30px;
width: 100%;
}
Here is what I already have. The problem here is that the #body won't accept any max-height parameter and resize itself according to its content.
Demo http://jsfiddle.net/deHvH/1/, with jQuery UI Resizable http://jsfiddle.net/deHvH/2/
EDIT: the flexbox model is what I needed.
You can adjust the max-height accordingly with the following CSS.
#container {
height: 300px;
width: 300px;
}
#container #header {
background: #888;
height: 30px;
width: 100%;
}
#container #body {
background: #777;
max-height: 200px;
overflow: auto;
}
#container #footer {
background: #888;
height: 30px;
width: 100%;
}
Did this solve your concern?
The flexbox model was what I needed !
#container {
display: table;
height: 300px;
width: 300px;
display: box;
}
#container #header {
background: #888;
height: 30px;
}
#container #body {
background: #777;
box-flex: 1;
overflow: auto;
}
#container #footer {
background: #888;
height: 30px;
}