Footer is displayed over content. I need it always on the bottom of the page

问题

I am new to CSS and HTML, and I'm trying to create a simple HTML page.

So about the implementation : I have a main div called container with relative positioning. Inside this main div, I have 3 more div's: header- positioned absolute with top: 0px, menu- also absolute, footer- absolute with bottom: 0px. My main problem is about the content div which is placed between menu div and the footer. If this content div has much information, its height becomes larger than the main div(container), and the footer is displayed over the information from the content div.

I tried to not give a positioning and place under the menu div with padding-top, but then the last 2-3 lines are lost under the footer. I should say that a sticky footer is not what I'm looking for. I need another solution.

This the HTML:

<body>
        <!-- CONTAINER -->
        <div id="container">
            <!--HEADER-->
            <div id="header" >
                <p>Header</p>
            </div>
            <div id="menu" >
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 3</li>
                    <li>Menu Item 4</li>
                    <li>Menu Item 5</li>
                </ul>
            </div>
            <!-- Problematic div -->
            <div id="content"> // simulate large amount of information
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
            </div>
            <div id="footer">
                <p> Footer </p>
            </div>
        </div>
    </body>

and CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#container{
    position : relative;
    min-height:100%;
}

#header{
    top : 0px;
    position : absolute;
    width : 100%;
    height : 100px;
    background-color: red;
}

#header p{
    position : absolute;
    top : 39px;
}


#menu{
    position : absolute;
    top : 100px;
    width: 100%;
    background-color: yellow;
    overflow: auto;
    white-space:nowrap;
}

#menu ul{
    margin : 0px;
    padding-left: 20px;
    list-style-type: none;
}
 #menu li{
    display : inline-block;
    padding-right: 150px;
    border-style : 1px solid;
 }

 #content{
    /*
    padding-top : 121px;
    */
    position: absolute;
    top : 120px;
    width : 100%;
    background-color: green;
 }

 #footer{
    position: absolute;
    width: 100%;
    height : 60px;
    background-color:grey;
    bottom : 0px;
 }

Sorry for the long post. I just tried to explain the problem as best as possible. Thanks a lot.

回答1:

To fix without modifying the HTML, apply display: inline-block; to #content and #footer, remove positioning, and add padding-top: 121px; back onto #content: http://jsfiddle.net/a2jJC/2/

#content {
    padding-top : 121px;
    width : 100%;
    background-color: green;
    display: inline-block;
}
#footer {
    width: 100%;
    height : 60px;
    background-color:grey;
    display: inline-block;
}

回答2:

You could constrain the height of your div#content and use overflow: scroll to make the content scrollable.

#content{
  position: absolute;
  top: 120px;
  width: 10%;
  background-color: green;
  height: 800px; /* assumed height, use an appropriate value */
  overflow: scroll;
}

CSS Overflow - MDN

回答3:

I was having this same issue with content being hidden behind my footer. If you have your footer at a (somewhat) fixed height, like I do:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  min-height: 100px;
  max-height: 110px;
  background-color: rgba(36, 32, 33, 0.9);
  color: white;
  font-family: "Helvetica Neue", Helvetica;
  padding: 10px 0px;
  padding-top: 10px;
  margin-top: 30px;
  font-weight: 100;
  clear: both;
}

Just set your bottom margin of your div containing the page content to a height just greater than that of the max footer height. Scrolling content will stop right on top of the footer!

#content {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  background: #fff;
  border: 1px solid #ccc;
  border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 115px;
  clear: both;
}

Just as a disclaimer, this is my first answer to a question here. I apologize in advance for any coding faux pas committed above. :)

来源：https://stackoverflow.com/questions/19865705/footer-is-displayed-over-content-i-need-it-always-on-the-bottom-of-the-page

标签

css

css-position

footer

html