CODEWITHSUNDEEP
htmlcss
imw
imw

Reputation: 33

Content div height exceeding page height

I have an issue where the height of the "content body" div (below) is exceeding the bottom of the page (and behind the page footer). I want this div to scroll when there is long content, which it does now, but it doesn't scroll to the bottom of the div as it is beyond the page. I'm not sure what is causing the issue? Here is an example: http://jsfiddle.net/Gg6qY/

CSS:

html, body {
    height:100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
header {
    position: fixed;
    width: 100%;
    background: #006f3b;
    color: #fff;
    top: 0;
    height: 60px;
    padding: 10px;
}
#content {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 60px 0 20px 0;
    /* Header height and footer height */
    margin: 0 auto;
    /* Center content */
}
#sidebar {
    position: absolute;
    background: #191919;
    color: #fff;
    left: 0;
    top: 60px;
    bottom: 0;
    width: 220px;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#contentHeader {
    position: relative;
    left: 220px;
    z-index: 100;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #191919;
    -webkit-box-shadow: 3px 3px 3px #888888;
    -ms-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
#contentBody {
    position: relative;
    background: #fff;
    height: 100%;
    margin-left: 220px;
    padding: 0 10px;
    overflow-y: scroll;
}
footer {
    position: fixed;
    width: 100%;
    background: #999;
    color: #000;
    bottom: 0;
    height: 20px;
    text-align: center;
}

HTML:

<body>
    <header>The header</header>
    <div id="content">
        <div id="sidebar">The Sidebar</div>
        <div id="contentHeader">The Content Header</div>
        <div id="contentBody">
            <p>The Content Body</p>
        </div>
    </div>
    <footer>The Footer</footer>

Thanks!

Upvotes: 2

Views: 5529

Answers (3)

dano
dano

Reputation: 1043

if you know exactly where you want the top and bottom of all elements to be (which is seems like you do), its usually easiest to use 'top', 'bottom', 'left', and 'right' rather than 'width' and 'height', as padding adds to the width and height and will cause nasty overflows.. anyways this works on my machine.. 

html, body {
    height:100%;
    margin: 0px;
}
header {
    position: absolute;
    left: 0px;
    right: 0px;
    background: #006f3b;
    color: #fff;
    top: 0px;
    height: 60px;
    padding: 10px;
}
#content {
    position: absolute;
    top: 60px;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
#sidebar {
    position: absolute;
    background: #191919;
    color: #fff;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 10px;
}
#contentHeader {
    position: absolute;
    top: 0px;
    left: 220px;    
    height: 15px;
    padding: 10px;
    z-index: 2;
    background: #fff;
    right: 0px;
    border-bottom: 1px solid #191919;
    -webkit-box-shadow: 3px 3px 3px #888888;
    -ms-box-shadow: 3px 3px 3px #888888;
    box-shadow: 3px 3px 3px #888888;
}
#contentBody {
    position: absolute;
    padding: 10px;
    background: #fff;
    left: 220px;
    top: 38px;
    bottom: 20px;
    right: 0px;        
    overflow: auto;
}
footer {
    position: fixed;
    left: 0px;
    width: 100%;
    background: #999;
    color: #000;
    bottom: 0;
    height: 20px;
    text-align: center;
}

Upvotes: 0

gp.
gp.

Reputation: 8225

body and #content, goes beyond the window size as height:100% means height of the content area of the body which if you add to top and bottom padding, goes beyond the window. use box-sizing:border-box to fix this.

contentBody to expand to maximum available height, make it absolute and set top and bottom.

contentBody should also work ideally with height 100%. Have not checked that.

updated fiddle:

http://jsfiddle.net/GaYf4/1/

Upvotes: 3

BentOnCoding
BentOnCoding

Reputation: 28208

Not sure what your intended goal is, but I think this is what you are looking for. 

html{
    min-height: 100%;
}
html, body {
    width: 100%;
    overflow: hidden;
    margin: 0;
}
body
{
    height: 100%;
}

Upvotes: 0

Related Questions