CODEWITHSUNDEEP
csscss-positionfooterhtml
user2271933
user2271933

Reputation: 491

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.

Upvotes: 1

Views: 50561

Answers (4)

E. G.
E. G.

Reputation: 1

This worked for me:
Wrap in a div and add padding.
Like this:

<div class="p-3">
<footer class="border-top footer text-light bg-dark">
    <div class="container">
        &copy; @DateTime.UtcNow.Year - The name of the owner - <a asp-area="" asp-controller="Home" asp-action="Contact" class="stretched-link">Contact</a>
    </div>
</footer>
</div>

Upvotes: 0

Drew Moore
Drew Moore

Reputation: 11

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. :)

Upvotes: 1

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

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;
}

Upvotes: 2

Finni McFinger
Finni McFinger

Reputation: 236

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

Upvotes: 3

Related Questions