How do I control the height of the main content area no matter how much text is in there?


Tags: html,css

Problem :

I'd like to control the main height of the content area. I don't want to set a fixed height. How would I do that to make it fluid up and down.

Currently, if there is a lot of text, the main text area overlaps on the footer. If there is only a little bit of text, the footer is way down on the page.

Here's my jsfiddle: http://jsfiddle.net/z9j9rsz2/58/

Here's my HTML

    <body id="bodyId" align="center">
<div id="outerWrapDiv">
<div id="wrapper">
<div id="headerWrap">
    <div id="mktHeader">
      <div id="logo">
        <img src="http://www.play-itproductions.net/images/standardlogos/dvd-logo.gif" />
      </div>
    </div>
</div>
<div id="innerWrapDiv">


<!-- START TEMPLATE HTML - EDIT THIS SECTION -->
<div id="mktContent">
<!-- Base of Landing Page Content -->
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

<!-- END TEMPLATE HTML -->

</div>
</div>

<div id="footerWrap">
    <div id="mktFooter">
        <div class="copyright">Copyright &copy; 2014 Microsoft, Inc.</div>  
    </div>
</div>

</div>
</body>

Here's my css:

#bodyId {
background: #232323;
font-family: Arial, sans-serif;
font-size: 14px;
line-height:18px;
text-align: center;
margin: 0px;
padding: 0px;
}

div#outerWrapDiv {
    position: relative;
    height: 100%;
    width: 100%;
    }

div#innerWrapDiv {
    position: relative;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    }

</style>

<!-- START TEMPLATE CSS - EDIT THIS SECTION -->

<style>
/* Note: You can also change these in the specific Landing Pages*/

/* Width of Full Page */

    div#innerWrapDiv {
     width: 960px;
    }

img {
    border:none;    
}
#wrapper {
    background:#e2e3e4;
}

/* Main Header Area  */
div#headerWrap {
    background: transparent;
    width:100%;
}

div#mktHeader {
    border-top:10px solid #f66511;
    background:#fff;
    height: 90px;
    margin: 0 auto;
    position:relative;
    width:960px;  
    }

#logo {
    border: 0 none;
    display: block;
    margin: 15px auto 0 auto; 
    }

/* Main Content Area - Controls height of page */
div#mktContent {
    background:#fff;
    height: 1500px;
    position: relative;
    }

/* Footer Area */
div#footerWrap {
    background: #232323;
    margin-bottom:50px;
    width:100%; 
}
div#mktFooter {
    background:#232323;
    color:#fff;
    font-size:11px; 
    height: 50px;
    margin: 0 auto;
    position: relative;
    width:960px;
    }

/* Footer links and Copyright */

    .copyright{
        color:#fff;
        font-size:11px;
        margin: 0 auto;
        padding-top: 20px;
        text-align: center;
    }


Solution :

You can remove height and set overflow: auto :

div#mktContent {
    background:#fff;
    overflow:auto;/*Replace height with overflow*/
    position: relative;
}

fiddle


    CSS Howto..

    How to change text in the same area when hover over images with CSS?

    How can a

    How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery

    element doesn't show padding in Opera, Safari, IE

    How to change the size of item-avatar in ionic?

    How to center-zoom with responsive images without affecting the image size?

    how to change css styles of custom jquery widget?

    How can I change the ckeditor iframe CSS styling

    How to make text disappear when HTML5 Video has finished loading?

    How to exclude particular class name in CSS selector?

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How do I change the display position from absolute to relative?

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    How to remove vertical scrollbar from iframe inside the page

    How to embed a custom bitmap font into website using CSS

    How do I use a variable to get CSS info on an element?

    CSS: How to set a fallback for bold font families?

    Force browsers load CSS before showing the page

    How would you vertically justify text with css/Javascript?

    How to get css property value in pure javascript

    how can I fetch a website and overwrite some ot its html and css [closed]

    How to get a css animation to transition quicker in keyframes

    how to set responsive background-image of element using css?

    How can I force the download of unused CSS images?

    How to stop children from clipping when using dynamic height parents?

    How to have a video take up the viewport height and width?

    how to show text in a button with css

    How to make CSS drawn character responsive inside bootstrap column

    Hide and show divs with multiple common classes