CODEWITHSUNDEEP
csshtmllayout
Daniel Rosenthal
Daniel Rosenthal

Reputation: 1386

Make navigation div expand entire height

I have a navigation div on the left of my page. I want it to span the entire height of the page. This is fine (and easy) if the content doesn't require the page to scroll, however, there are a few pages where I have lots of content, so the page must scroll. However, the div ends just a little bit below where the page did.

Here's the basics of the HTML:

<html>
    <head>
        <title> (Title) </title>
        <div id="header>
            <h1> Header </h1>
        </div>
    </head>

    <body>
        <div id="nav">
            (nav)
        </div>

        <div id="content">
            (Content)
        </div>
    </body
</html>

And the (I think) relevant CSS is: 

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100;
}
html{
  min-height: 100%;
  min-width: 100%;
  position:relative;
  margin: 0;
}

#nav {
  position: absolute;
  width: 110px;
  min-height: 100%;
  margin: 0;
  margin-top: 90px;
  padding-top: 10px;
  padding-left: 10px;
  overflow: hidden; 
}

The content div expands all the way to the bottom of the screen, but not the nav div. Any idea what needs to change to make it look right?

Screenshot Screenshot

EDIT: full base.html template

<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %} Title Goes Here {% endblock %}</title>
    <div id="header">
      <h1> {% block head %} Header Goes Here {% endblock %}</h1>
    </div>
    <div id="logo">
      <img src="{{ MEDIA_URL }}logo.png" alt="logo" width="125" height="125">
      <!--<img src="http://www.tecnospotsolar.com/content/images/yingli_logo_1.png" alt="logo" width="270" height="81"> -->
    </div>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="{{ STATIC_URL }}layout1.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div id="nav">
      {% block nav %}
      <ul>
    <li><a href="/workflow/"> Home </a> 
    <li><a href="/workflow/new"> New Entry </a>  
    <li><a href="/workflow/list/request/"> Requests </a> 
    <li><a href="/workflow/list/approved/"> Approved </a> 
    <li><a href="/workflow/list/rejected/"> Rejected </a> 
    <li><a href="/workflow/list/fulfilment/"> Fulfilment </a> 
    <li><a href="/workflow/list/poa/"> POA </a>
    <li><a href="/workflow/list/confirmed/">  Confirmed </a>
    <li><a href="/workflow/profile/"> Profile </a>
    </div>
      </ul>
      {% endblock %}
    </div>

    <div id="content">
      {% block content %} Body Goes Here {% endblock %}
    </div>
    <div class="clear"/>

     <div id="login">
      <a href="/workflow/login/"> Login</a>/<a href="/workflow/logout/">Logout</a>
    </div>

  </body>
</html>

And CSS...

body {
  font-family: Helvetica, Arial, sansserif;
  font-size: 14px;
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100;
}

head {
  min-width: 100%;
}

h1 {
  font-family: Helvetica, Arial, sansserif;
  font-size: 20px;
  font-weight: bold;
}

h2 {
  font-family: Helvetica, Arial, sansserif;
  font-size: 18px;
  font-weight: bold;
}

*{
  margin: 0;
}

html{
  min-height: 100%;
  min-width: 100%;
  position:relative;
  margin: 0;
}

html, body{ 
  height: 100%
}

ul{
  margin: 0;
  padding: 0;
}

.wrapper{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

.footer, .push{
  height: 4em;
}

/********* ID's ************/



#nav {
  position: absolute;
  width: 110px;
  min-height: 100%;
  margin: 0;
  margin-top: 90px;
  padding-top: 10px;
  padding-left: 10px;
  border-right: 5px solid #00047A;
  border-left: 5px solid #EBDE95;
  font-weight: normal;
  background-color: #EDF3FE;
  font-size: 16px;
  overflow: visible;
}

#nav a:visited{
  color: #040638;
  font-weight: 700;
  text-decoration: none;
}

#nav a:link{
  color: #040638;
  font-weight: 700;
  text-decoration: none;
}

#nav ul{
  list-style: none;
}

#nav  ul li{
  height: 2em;
}

#nav ul li a{
  display: block;
  line-height: 2em;
}

#nav li:hover a{
  color: white; 
  font-weight: bold;
  text-decoration: none;
}

#nav ul li:hover{
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  width: 100%;
}




#content {
  position: absolute;
  padding-top: 20px;
  padding-left: 25px;
  margin-top: 95px;
  margin-left: 130px;
  min-height: 100%;
  min-width: 100%;
  background-color: #F5F5F5;
}

#content ul{
  padding-left: 15px;
}

#header {
  position: absolute;
  height: 60px;
  min-width: 100%;
  top: 0;
  background-color: #EDF3FE;
  border-bottom: 5px solid #00047A;
  border-left: 5px solid #EBDE95;
  border-top: 5px solid #EBDE95;
  padding-left: 250px;
  padding-top: 25px;
}

#logo{
  position: absolute;
  margin-top: -17px;

  padding-left: 100px;
}

#login{
  position: absolute;
  right: 0;
  padding-right: 10px;
  padding-top: 30px;
  font-size: 16px;
}

#warning{
  font-size: 16px;
  color: red;
}

/********** CLASSES *************/

.field_error{
  background-color: #F9FFAD;
}

.button-container form,
.button-container form div {
  display: inline;
}

.button-container button{
  display: inline;
  vertical-align: middle;
}

.clear{
  clear:both;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 0;
}

Upvotes: 2

Views: 4937

Answers (5)

user2766416
user2766416

Reputation: 1

you need to encase your navigation div into a parent div

make the parent div 100% height with the tiling bg image

then insert the navigation div inside of its parent relative to top so it stays at the top of its parent div

hope that helps

Upvotes: 0

Tim McCann
Tim McCann

Reputation: 3

I used the code that you provided and added the rest that was needed to make it work. If this doesn't help then I think something else is causing the problem and not the code that you posted. If so, could you post a link to the source or a jsfiddle?

http://jsfiddle.net/G2nAw/1/

HTML CODE

<body>
    <div id="nav">
        (nav)
    </div>

    <div id="content">
        (Content)
    </div>
</body>

CSS 

 body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100;
    }
    html{
    min-height: 100%;
    min-width: 100%;
    position:relative;
    margin: 0;
    }

    #nav {
    position: absolute;
    width: 110px;
    min-height: 100%;
    margin: 0;
    padding-top: 10px;
    padding-left: 10px;
    overflow: hidden; 
    left:0;
    top:0; 
    background-color:red;
    }

#content{
    background-color:blue;
    width:500px;
    height:1000px;
    margin-left:130px;
}

Upvotes: 0

Daniel Rosenthal
Daniel Rosenthal

Reputation: 1386

I came up with a solution that I don't particularly love, but we'll see if we can live with it. I have changed the header and navigation divs to position: fixed so they always appear at the same place on the screen. I then had to give the content the attribute z-index: -1; so that it goes 'behind' the header and navigation when scrolling. Honestly, there are only a few scenarios where this will even be encountered, so I think it will work for us.

Upvotes: 1

Ivozor
Ivozor

Reputation: 976

Try adding a clearing div after your content div.

In your HTML:

<html>
    <head>
        <title> (Title) </title>
        <div id="header>
            <h1> Header </h1>
        </div>
    </head>

    <body>
        <div class="wrapper">
            <div id="nav">
                (nav)
            </div>

            <div id="content">
                (Content)
            </div>
            <div class="clear"/>
        </div>
    </body>
</html>

And in your CSS:

.clear
{
   clear:both; 
   margin:0; 
   padding:0; 
   height:0;
}

#nav
{
   height: 100%;
}

Upvotes: 1

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

To make a child element's height 100% you need to set the height of all the parent elements so add this in your css:

html, body { height: 100%; }

If your background has stopped scrolling then it is because of your overflow: hidden; try removing that, and it would work. :)

Hope it helped!

Upvotes: 1

Related Questions