Css height issue

Question

ZeroEddy 0 Newbie Poster

8 Years Ago

Hello there I am currently just making a sample website to try and get back into the swing of things but I am encountering a problem with one of my divs. The div giving trouble is the leftContent div. I want to set the height of it to fit the screen down to the footer but when I set it to 100% it over flows the footer causeing you to scroll down. As there is currently no content inside it I dont want this. Please find below my code. Any help on this matter would be greatly appreciated.
Html code

<html> <head> <link rel="stylesheet" href="css/main.css"/> <title>Ep is a ledge!</title> </head> <body> <div id="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" alt="Logo" style="border:0;" > </div>
This is the header div
</div><!--end of header div--> <div id="navbar"> <ul> <li><a href="#">Home</a> <li><a href="#">About</a> <li><a href="#">Services</a> <li><a href="#">Photos</a> <span id="rightBorder"><li><a href="#">Contact</a></span> </ul> </div><!--end of navbar div--> <div id="leftContent"> <p>This is left contentThis is left contentThis is left contentThis is left contentThis is left contentThis is left contentThis is left content</p> </div><!--end of leftContent div--> <div id="rightContent">
This is right content
</div><!--end of rightContent div--> <div id="footer">
This is the footer
</div><!--end of footer div--> <div style="clear:both;"></div> </div><!--end of container div--> </body> </html>

Css code

*{
    padding:0;
    margin:0;
}

#container{
    border-left:1px solid #000;
    border-right:1px solid #000;
    width:80%;
    height:100%;
    min-width:900px;
    margin: 0 auto 0 auto;
}
#header{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    height:152px;
    width:100%;
    float:left;
    line-height:150px;
    background: #0078ff;
    font-size: 50px;
    font-family: "aerial", Georgia, Serif;
    font-weight: bold;
    font-style: italic;
}
#logo{
    width:150px;
    float:left;
    padding-right:50px;
    padding-left:10px;
    padding-top:1px;
}

#navbar{
    float:left;
    width:100%;
    height:30px;
    line-height:30px;
    border-bottom:1px solid #000;
    text-align:center;
}
#navbar ul{
    list-style-type: none;
}
#navbar li{
    display:inline;
    padding-right:10px;
    padding-left:10px;
    border-left:1px solid #000;
}
#navbar ul li a{
    text-decoration:none;
    color:#000;
}
#navbar ul li a:hover{
    font-weight: bold;
    font-style:italic;
    color:#c1bdbd;
}
#rightBorder{
    border-right: 1px solid #000;
}

#leftContent{
    float:left;
    width:20%;
    height:65%;
    border-right:1px solid #000;
}

#footer{
    position:fixed;
    bottom:0;
    border-top: 1px solid red;
    width:80%;
    height:50px;
    margin: 0 auto 0 auto;
    line-height:50px;
    text-align:center;
}

html-css

3 Contributors
3 Replies
462 Views
2 Days Discussion Span
Latest Post 8 Years Ago Latest Post by ZeroEddy

gentlemedia 803 Master Poster

8 Years Ago

@rynatroop is right when setting a height of 100% on the container, then you should set a 100% height on the html and body tag too. Otherwise it takes 100% of 0 which is 0.
To overcome this you can set the container height to 100vh which means it takes 100% of the viewport height.
http://caniuse.com/#feat=viewport-units

But if you don't need to support really old browsers and want a sticky footer at the bottom then you can get even more fancy with your CSS by using calc().
http://caniuse.com/#feat=calc

HTML:

<div class="container">
  container
</div>
<div class="footer">
  footer
</div>

CSS:

.container {
  height: calc(100vh - 90px); /* minus the height of the footer */
  background-color: #ccc;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;  /* for smooth momentum scrolling on iOS */
}

.footer {
  height: 90px;
  background-color: #666;
}

Little demo: http://codepen.io/gentlemedia/full/EgxaOB/

Edited 8 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ryantroop 177 Practically a Master Poster · Answer 1 · 2016-08-31T21:16:21+00:00

When posting questions like this, it really does help to have a "live" demo page available. That said...

A couple comments on what I do see...

you have a "fixed" footer, which removes it from the page flow no matter what - which means being structured inside the "container" element does nothing for you. In fact, it may be part of your problem depending on the browser and how it handles a fixed element inside a relative element (im pretty sure the "right" way for a browser to handle this is to ignore the relative element completely, but shrug who am I to say so?)

That said, your "container" element has a height of 100% - of what? Since your HTML and BODY tags do not have a given height, this particular bit of CSS is worthless. This means that all of the "height" comes from block elements with height that exists within the flow of the document within this container. So, if all of that adds up in size, and then you have your height 100%, you basically have double the height of the parent container - and if that causes an overflow on the page - then there's your problem.

So I went and plopped this into JS Fiddle (https://jsfiddle.net/kdvx5yes/) and you can see the result - it's not pretty. If that's not at all what your page looks like, then some other things appear to be missing, and not given to us via your code snippet - again, an important reason for a live site to see / test on. In the fiddle, you do not overrun vertically anywhere - horizontally, though, youre all over the place.

I don't think anyone can really help given the information you provided.

ZeroEddy 0 Newbie Poster · Answer 2 · 2016-09-02T14:31:16+00:00

Thanks very much guys. I have not been keeping up with html / css for some time and am getting back into it now. I will mark this as solved. Thanks very much once again.