Develop Reference

Using CSS Transitions on Auto Height Dimensions

I'm making a collapsible panel and the issue is with the [data-panel] not keeping the css transition when it's set to height: 100%. it works fine for fixed height i.e. height: 150px , but it's important to keep height dynamic since I don't know the available space of the content inside. i'd prefer not modifying the html or js but i'm open to suggestions...
Codepen: issue on line 44 in css
https://codepen.io/oneezy/pen/bGBpXaW
function activeLinks() {
document.addEventListener('click', e => {
let linkEl = e.target.closest('[data-link]');
if (linkEl) {
let url = linkEl.dataset.link;
let linkEls = document.querySelectorAll('[data-link]');
let ActivelinkEls = document.querySelectorAll(`[data-link="${url}"]`);
// remove "active" class from all links
Array.from(linkEls).forEach( (el) => {
el.classList.remove('active');
});
// add "active" class to all matching links
Array.from(ActivelinkEls).forEach( (el) => {
let prevLink = el.parentElement.previousElementSibling;
let prevPrevLink = el.parentElement.parentElement.previousElementSibling;
el.classList.add('active');
if (prevLink && prevLink.dataset.link) {
prevLink.classList.add('active');
prevLink.parentElement.classList.add('active');
}
if (prevPrevLink && prevPrevLink.dataset.link) {
prevPrevLink.classList.add('active');
prevPrevLink.parentElement.classList.add('active');
}
});
}
});
}
activeLinks();
/* Reset
*********************************/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: roboto; }
html, body { height: 100%; overflow-x: hidden; }
a { text-decoration: none; display: block; }
/* Layout
*********************************/
#page { display: grid; grid-template-columns: 160px 1fr; gap: 3rem; height: 100%; }
#nav { background: black; display: block; align-items: start; align-content: start; justify-content: stretch; padding: 2rem 1rem; }
#main { display: flex; justify-content: space-around; padding: 2rem 5rem 0 0; }
/* Navigation
*********************************/
/* Sections */
#nav .link-level__one { margin: 1rem 0; }
#nav .link-level__two { }
#nav .link-level__three { position: relative; }
#nav .link-level__three::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; width: 100%; background: gray; }
/* Links */
#nav .link-level__one a { padding: .25rem .5rem; color: gray; font-weight: 900; }
#nav .link-level__one a.active { color: white; }
#nav .link-level__two a { padding: .25rem .5rem; color: gray; font-weight: normal; }
#nav .link-level__two a.active { color: white; }
#nav .link-level__three a { padding: .25rem .5rem; color: gray; }
#nav .link-level__three a.active { color: white; font-weight: normal; }
/* Main
*********************************/
#main section { }
#main a { color: black; padding: 1rem .5rem; }
#main a.active { background: blue; color: white; }
/* Panel
*********************************/
[data-panel] { height: 0; overflow: hidden; transition: .22s .22s ease-in-out; }
.active ~ [data-panel] { height: 150px; } /* I NEED THIS TO BE DYNAMIC HEIGHT! */
<div id="page">
<nav id="nav">
<!-- LINK 1
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 1
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 1a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 1a-1
Link 1a-2
Link 1a-3
</section>
</section>
</section>
<!-- LINK 2
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 2
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 2a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 2a-1
Link 2a-2
Link 2a-3
</section>
</section>
</section>
<!-- LINK 3
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 3
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 3a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 3a-1
Link 3a-2
Link 3a-3
</section>
</section>
</section>
</nav>
<main id="main">
<section>
<h2>Link Level 1</h2>
Link 1
Link 2
Link 3
</section>
<section>
<h2>Link Level 2</h2>
Link 1a
Link 2a
Link 3a
</section>
<section>
<h2>Link Level 3</h2>
Link 1a-1
Link 1a-2
Link 1a-3
Link 2a-1
Link 2a-2
Link 2a-3
Link 3a-1
Link 3a-2
Link 3a-3
</section>
</main>
</div>

It's a duplicate question that has been answered here:
How can I transition height: 0; to height: auto; using CSS?
You can use a max-height greater than it will ever be to accomplish this.
#menu #list {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
max-height: 1000px;
transition: max-height 1s ease-in;
}

I've somewhat came up with a solution I'm proud of; however, it's not perfect. The main trick in getting this to work was giving the [data-panel] a line-height: 0 and transitioning it when it becomes active (THE LINE-HEIGHT ONLY). Also you'll need to make sure the contents of the [data-panel] don't have any margin or padding (until the panel becomes active) or it will completely throw off the UI.
https://codepen.io/oneezy/pen/bGBBEmp
/* Panel
*********************************/
[data-panel] {
overflow: hidden;
line-height: 0;
opacity: 0;
pointer-events: none;
transition: line-height .22s ease-in-out;
}
.active + [data-panel] {
line-height: 1.4;
opacity: 1;
pointer-events: auto;
}
I'm answering my own question; however, I'm not accepting it as the chosen answer. I'd love to see more unique solutions added to this thread.

The short answer is that you can't. Height transitions will only work on elements that use a unit based value for their height property.
Here's an article detailing different techniques to achieve the same outcome: https://css-tricks.com/using-css-transitions-auto-dimensions/

16:9 Aspect Ratio App & Background (Accounting for space taken by the Nav)

Ok, I am working on creating a simple game for IOS / Android and I'm having a little trouble with consistency in the layout across devices.
My new hypothesis is essentially if I develop the layout in 16:9 ratio, it will scale well for most / all devices. I have achieved maintaining the ratio on the outside wrapper of the game, but the game area is also a 16:9 ratio background image, which I cannot get to properly scale down to fill the "game area"
For this, let's assume there is 30px on top and 30px on bottom of the page for navigation, which means the "game area" has a height of 100% - 60px and width of 100%, which leads to the problem. despite the background image being 16:9 ratio, that area is no longer a 16:9 canvas area.
My attempts:
Change the image to lop off 60px -> this failed horribly
Centering the background image on the "game area", which isn't too bad, but we lose a lot of space on the sides. Background 100% of inner DIV
Using canvas to force the image into the area, but things get blurry: Background Using Canvas
Moving the background image to the outside wrapper / body. This actually looks quite good! BUT I lose 60px of the image still that is covered by the NAV. Seen Here: Background 100% of wrapper that is 16:9
Any other thoughts on how to get a better result?
This is the current code:
#Game_Wrapper {
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
padding: 0;
border: 1px solid red;
background: lightblue url('https://i.imgur.com/tRFltCI.png') 0 0/contain no-repeat;
}
#Game_Area {
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
}
#GUI_Top {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Top p {
margin: 0;
padding: 0;
text-align: center;
}
#GUI_Bottom {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Bottom p {
margin: 0;
padding: 0;
text-align: center;
}
/* 100 * 16/9 = 177.778 */
#media (min-width: 177.778vh) {
#Game_Wrapper {
height: 100vh;
width: calc(100vh * 16 / 9);
}
}
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>

As you already notice, it's impossible to keep the 16:9 ratio of the image inside a container that is also 16:9 and having other elements.
What I advise is to fill the remaining space with an extension of the image so we may think it's the same image.
Here is an approximation of how it shoud look. I simply filled the empty space with the same image but blurred. The idea is to find the good pattern to make it visually better:
#Game_Wrapper {
width: 100vw;
height: calc(100vw * 9 / 16);
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
border: 1px solid red;
}
#Game_Area {
margin: 0;
padding: 0;
width: 100%;
height: calc(100% - 60px);
background: url('https://i.imgur.com/tRFltCI.png') center/contain no-repeat;
position:relative;
overflow:hidden;
}
#Game_Area:before {
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
z-index:-1;
background:
url('https://i.imgur.com/tRFltCI.png') right/contain no-repeat,
url('https://i.imgur.com/tRFltCI.png') left/contain no-repeat;
filter:blur(8px);
}
#GUI_Top {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Top p {
margin: 0;
padding: 0;
text-align: center;
}
#GUI_Bottom {
margin: 0;
padding: 0;
height: 30px;
background: grey;
}
#GUI_Bottom p {
margin: 0;
padding: 0;
text-align: center;
}
/* 100 * 16/9 = 177.778 */
#media (min-width: 177.778vh) {
#Game_Wrapper {
height: 100vh;
width: calc(100vh * 16 / 9);
}
}
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="Game_Wrapper">
<!-- This will hold the entire game and GUI -->
<div id="GUI_Top">
<!-- This is where the top GUI will be -->
<p>This is the top GUI / NAV</p>
</div>
<div id="Game_Area">
<!-- This is where you can interact with the actual game -->
</div>
<div id="GUI_Bottom">
<!-- This is where the bottom GUI will be -->
<p>This is the bottom GUI / NAV</p>
</div>
</div>
</body>

Show Div on Nav Element Click and Hide Other Divs

I built a navbar in HTML and also some Divs which are populated with a bunch of content that pertains to each nav element.
What I want to do is show the div which pertains to the selected nav element when it is clicked and hide the other divs that pertain to the other nav elements.
Basically what needs to happen is when a user clicks on a Nav Item, the class for that nav item needs to be set to 'navItem active on' in the html. Not sure if this is something that happens automatically or not.
After that, the display property defined in the CSS for the content panel of that nav item needs to be changed to 'block' and all other content panels should then have their 'display' property changed to 'none' so that they are not displayed in the page.
In the example given, I only have two content panels defined in the CSS and HTML (Capabilities and Tutorials), but each navItem will receive it's own content panel which should be toggled on when it is clicked.
I really have no idea where to begin with this. I'm pretty sure this requires JavaScript but this is literally my first attempt at building a web page and it took me 2 days even after copying a lot from another website I used for inspiration. Any help, guidance or insight is greatly appreciated.
CSS + HTML:
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(sender, event) {
event.preventDefault();
/* hide all panels */
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
/* Show the selected panel */
var panel_id = sender.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
}
}
/* FONT ASSIGNMENTS
--------------------------- */
/* General Use */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p,
small {
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
p.large-text {
font-size: 18px !important;
}
hr {
background-color: #e0e0e0;
color: #e0e0e0;
}
.center-content {
text-align: center !important;
}
/* Special Use */
h1,
h2,
h1 a,
h2 a,
h3,
h3 a,
infoBar,
.gisFont1,
.gisFont1 a {
font-weight: normal !important;
font-style: normal;
line-height: normal;
font-variant: normal;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
/*-- END FONT ASSIGNMENTS --*/
/* INFOBAR - The Infobar is the navigation element at the top
used to navigate the subpages of the document and change the content
panel's content depending on the selected infoBar navigation element
--------------------------- */
/* infoBar Bottom Border */
#infoBar {
background: #FFF;
/*border-top: 1px solid #e5e5e5;*/
border-bottom: 1px solid #e5e5e5;
max-width: 940px;
text-align: center;
/*display: table;*/
margin: 0 auto;
}
/* infoBar Bottom Border onHover or Active element*/
#infoBar a:hover,
#infoBar a.active {
border-bottom: 4px solid #2889DE;
text-decoration: none;
}
/* infoBar Link Text */
#infoBar a {
background: transparent;
color: #000;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Link Text onHover */
#infoBar a:Hover {
background: transparent;
color: #2889DE;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Active element */
#infoBar a.active {
font-family: 'Avenir LT W01 65 Medium', Arial, Helvetica, sans-serif;
}
/* Media Queries */
#media screen and (max-width: 960px) {
#infoBar a {
font-size: 14px;
}
}
#media screen and (max-width: 830px) {
#infoBar a {
padding: 1em 0.6em;
}
}
#media screen and (max-width: 760px) {
#infoBar {
display: none;
}
}
/*-- END INFOBAR --*/
/* PAGE SECTIONS
--------------------------- */
/* Page Section Styling */
.page-section {
background-position: center top;
color: #4d4d4d;
min-height: 200px;
padding: 60px 0;
text-align: center;
width: 940px;
margin: auto;
}
/* Page Section - Header2 Styling */
.page-section h2 {
font-size: 24px;
margin-bottom: 20px;
}
/* Page Section Paragraph Styling */
.page-section p {
color: #333;
font-size: 18px;
line-height: 1.5;
/*margin: 10px 0 45px 0;*/
}
/* Foreword-Section-Top Styling */
.foreword-section-top {
padding: 0;
min-height: 160px;
}
/* Foreword-Section-Top Header1 Styling*/
.foreword-section-top h1 {
color: #222;
font-size: 36px;
}
/* Foreword-Section-Top Paragraph Styling */
.foreword-section-top p {
color: #4d4d4d;
margin-bottom: 10px;
}
.grid-100 {
width: 100%;
margin: auto;
}
/* CONTENT PANELS
----------------------------- */
/* Capabilties Panel*/
#capabilities-panel {
max-width: 980px;
margin: 0 auto;
display:block;
}
/*Tutorials Panel */
#tutorials-panel {
max-width: 980px;
margin: 0 auto;
display:none;
}
.product-row {
margin-bottom: 50px;
/*width: 100%; */
max-width: 940px;
margin: 0 auto;
display: inline-block;
}
.product-box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
float: left;
overflow: hidden;
margin: 0.5%;
position: relative;
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
width: 24%;
}
#media screen and (max-width: 960px) {
.product-box {
width: 48%;
}
}
#media screen and (max-width: 480px) {
.product-box {
display: block;
float: none;
margin: 10px auto;
width: 95%;
}
}
.product-box a {
color: #FFF;
display: block;
font-weight: bold;
}
.product-box a:hover .inner-box-padding {
position: relative;
width: 100%;
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.product-box .inner-box-padding {
background-color: #007ac2;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 100%;
}
.product-box .inner-box-padding:before {
content: "";
display: block;
padding-top: 87%;
}
.product-box h3 {
font-size: 22px;
color: #FFF;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.product-box.dark-text h3 {
color: #333;
}
.product-box .capability-one {
background-image: url('http://i64.tinypic.com/2mi16l1.png');
}
.product-box .capability-two {
background-image: url('http://i68.tinypic.com/10gwm75.png');
}
.product-box .capability-three {
background-image: url('http://i65.tinypic.com/5djxwh.png');
}
.product-box .capability-four {
background-image: url('http://i67.tinypic.com/15e7hu8.png');
}
.product-box .tutorial-one {
background-image: url('http://i68.tinypic.com/efhvfc.png');
}
.product-box .tutorial-two {
background-image: url('http://i66.tinypic.com/50199u.png');
}
.product-box .tutorial-three {
background-image: url('http://i63.tinypic.com/wvwcif.png');
}
.product-box .tutorial-four {
background-image: url('http://i67.tinypic.com/1zp1or8.png');
}
/* END PRODUCT BOXES */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- include jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- INFO BAR -->
<div id="infoBar">
Capabilities
Tutorials
Use Cases
Services
Security
What's New
Request Access
</div>
<!-- END GIS INFO BAR -->
<!-- FOREWORD -->
<div class="page-section foreword-section-top">
<h1>Some Cool Tagline</h1>
<p>blah blah blah. We're so awesome. Now give us money.</p>
</div>
<!-- CAPABILITIES PANEL -->
<div id="capabilities-panel" class="panel">
<!-- Capability One -->
<div class="product-box">
<a href="/capabilities/capability-one">
<div class="inner-box-padding capability-one"></div>
<h3>Capability 1</h3>
</a>
</div>
<!-- Capability Two box -->
<div class="product-box dark-text">
<a href="/capabilities/capability-two">
<div class="inner-box-padding capability-two"></div>
<h3>Capability 2</h3>
</a>
</div>
<!-- Capability Three box -->
<div class="product-box">
<a href="/capabilities/capability-three">
<div class="inner-box-padding capability-three"></div>
<h3>Capability 3</h3>
</a>
</div>
<!-- Capability Four box -->
<div class="product-box">
<a href="/capabilities/capability-four">
<div class="inner-box-padding capability-four"></div>
<h3>Capability 4</h3>
</a>
</div>
</div>
<!-- END CAPABILITIES PANEL -->
<!-- TUTORIALS PANEL -->
<div id="tutorials-panel" class="panel">
<!-- Tutorial One box -->
<div class="product-box">
<a href="/tutorials/tutorial-one">
<div class="inner-box-padding tutorial-one"></div>
<h3>Tutorial 1</h3>
</a>
</div>
<!-- Tutorial Two box -->
<div class="product-box dark-text">
<a href="/tutorials/tutorial-two">
<div class="inner-box-padding tutorial-two"></div>
<h3>Tutorial 2</h3>
</a>
</div>
<!-- Tutorial Three box -->
<div class="product-box">
<a href="/tutorials/tutorial-three">
<div class="inner-box-padding tutorial-three"></div>
<h3>Tutorial 3</h3>
</a>
</div>
<!-- Tutorial Four box -->
<div class="product-box">
<a href="/tutorials/tutorial-four">
<div class="inner-box-padding tutorial-four"></div>
<h3>Tutorial 3</h3>
</a>
</div>
</div>
<!-- END TUTORIALS PANEL -->

Pretty sure that this might do something like you'd want.
There are more elegant pieces of code (not to mention that there should be loads of plugins) for this though, this is just out of the top of my head (dont use $.attr to find the corresponding panel etc).
$(document).ready(function(){
$(".navItem").click(function(event) {
event.preventDefault();
$('.navItem').removeClass("active").removeClass("on");
$(this).addClass("active").addClass("on");
var panel = $(this).attr('panel-id');
$(".panel").hide();
$("#"+panel).show();
});
});
In order to use this script you need to import jQuery into your page though, which literally putting 1 line in your page (just google that).
You need to give every panel the class panel (i.e. instead of just the 'id' attribute. This will allow for the $(".panel") to find all html that is in a
The var panel = $(this).attr('panel-id'); line finds the panel belonging to the anchor the user clicked, as long as you add an attribute to each anchor containing the id of the corresponding panel as the value (e.g. <a (..) panel-id="capabilities-panel">)
=======
Updated answer so OP can use vanilla javascript per his request.
(function () {
alert('hello');
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(event) {
event.preventDefault();
for(int k = 0; k < links; k++) {
links[k].className = "navItem";
}
event.target.className += " active on";
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
var panel_id = event.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
});
}
})();
I haven't tested this so there's probably some syntactic errors here and there, and Im not too sure how one gets the sender element from a click event in vanilla javascript (though this shouldn't be too hard to google).
You need to put scripts in between <script></script> tags in order for your browser to recognize javascript.
Note how the number of lines and readability decreased by abandoning jQuery.
Hope this helps you!
Also, if this is just not working for you I recommend checking out the link the other guy posted under your question.

Fixed nav bar underneath a fixed header

So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index&nbspChat Room</td>
</tr>
</table>
</p><br>
</div>

If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!

Safari shows white space under my image?

I can't figure out why Safari is adding a white space to the bottom of the image on this website I am working on.
It renders correctly in Firefox and Chrome. The image should be fixed against the bottom of the page including when resized.
Here's some html
<!-- Page Content -->
<div class="container-fluid">
<div class="span12">
<div id="headImage">
<img class="center fit" src="images/Dale2.png" onmousedown='return false;' ondragstart='return false;'>
</div>
</div>
<!-- ./container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function () {
$(window).bind('resize', set_body_height);
set_body_height();
});
$('img').bind('contextmenu', function (e) {
return false;
});
$(document).ready(function () {
$(".center").hover(function () {
$(this).attr("src", "images/DaleBlurWithText.png");
}, function () {
$(this).attr("src", "images/Dale2.png");
});
});
</script>
</body>
and the CSS
body {
max-height:100%;
min-height: 100%;
background-color: white;
padding-top: 50px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.navbar {
background: white;
border: none;
}
.navbar-brand nav navbar-nav {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
margin: 0;
}
.navbar navbar-collapse {
text-align: center;
}
* {
padding: 0;
margin: 0;
}
.fit {
/* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
bottom-fixed: 0;
vertical-align: bottom;
}

try setting your image to display: block

I changed my css for my .center class to as follows and it solved the issue:
.center {
display: block;
position:fixed;
/* Center the image */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: 0;
/* set relative picture size */
max-width: 100%;
max-height: 90%;
}