Menu Height

by paulyabsley

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="wrapper">
    <header>
        <div class="height">&nbsp;</div>
    </header>
    <div class="page">
        <nav>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis volutpat dolor. Quisque tempus malesuada pretium. Fusce eget neque ac dui feugiat sodales fermentum sit amet tellus. Morbi orci ligula, ultrices ac fermentum sit amet, interdum eu urna. Praesent non diam erat, at ultrices nisl. Vestibulum venenatis, dolor ut scelerisque imperdiet, lacus urna ullamcorper elit, ut viverra nisi ante sit amet nisl. Etiam sed elit orci. Nam nulla enim, tempor quis blandit eget, laoreet suscipit ipsum. In at ullamcorper tellus. In odio ante, ullamcorper quis ornare sed, pretium vehicula urna. Nullam porttitor, dolor nec blandit aliquam, velit elit rhoncus diam, sed suscipit urna orci vitae elit. Suspendisse a augue a libero iaculis consectetur a eu sapien.</p>
        </section>
    </div>
    <footer>
    </footer>
</div>

<script>
    function menuHeight(h) {
        $(".page").css('min-height', h);
        $(".height").text("Height: " + h + "px.");
    }

    $(document).ready(function () { 
      menuHeight($("nav").height()); 
    });
</script>
</body>
</html>

CSS

.wrapper {
    margin: 0 auto;
    max-width:500px;
}

header, footer {
    background:#333;
    height:100px;
    overflow:hidden;
}

.page {
    background:#666;
    min-height:250px;
    position:relative;
}

nav {
    float:left;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    z-index:2;
}

nav li {
    background:rgba(75,255,80,0.8);
    margin-bottom:8px;
    height:100px;
}

section {
    color:#AAA;
    padding:20px;
}