Disqus评论与我的页脚重叠

Question

Hi guys I've made a lot of progress on this project but now I seem to have run into a slight issue when integrating the disqus commenting system.

I've looked at the other questions but it seems with html and css things can go sideways in so many different ways those questions didn't help too much.

It's overlapping the footer at the bottom of the page. I'll post a link to a sample page, please help. Thanks.

http://blubee.me/journal/ "disqus overlaps footer"

here's a screenshot below

css for the article section, the div article-footer which houses the disqus comment code doesn't have any styles applied to it.

.article-header .title {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5em;
  padding: 0 0 10px 0;
}

.article-meta {
  text-align: left;
  margin-top: -10px;
}

.article-meta img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.article-meta ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.article-meta ul li {
  display: inline-block;
}

.article-meta ul li a {
  text-decoration: none;
}

.article-meta ul li a:hover {
  color: #fff;
}

    .journals h1, .journals h2, .journals h3, .journals h4, .journals h5, .content h1, .content h2, .content h3, .content h4, .content h5 {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 1.5em;
      padding: 20px 0 15px 0; }

Answer 1

You said : the div surrounding the comments has no styles on it at the moment ...

That being said, it's obvious why the overlap is occurring, you have not set a width, height and position for the div containing the comments section.

In order for that to be fixed, you must define those. That will fix your problem.