Блог

У меня проблема, отображается только около 100 пикселей цвета фона. Я хочу, чтобы цвет фона сливался с текстом. У меня нет установленной высоты для div, поскольку я разрабатываю это для темы WordPress, и я хочу, чтобы пользователь мог размещать как можно больше контента без ограничений. Есть кто-нибудь, кто может помочь, ребята? Заранее спасибо

HTML

 <div class="maincontentinnercon">


            <div class="titlecon"><h1>About Us</h1></div>

            <div class="pcontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut felis at lacus tempor commodo. Duis at massa eget orci pellentesque vehicula in eu orci. Fusce suscipit mauris non odio mollis condimentum. Phasellus sodales sapien quis ultricies eleifend. In velit lacus, elementum sit amet feugiat sed, molestie ac justo. Proin sit amet pretium est, eu vulputate justo. Donec facilisis velit sed mi mollis malesuada. Curabitur tincidunt libero elit, at lacinia velit suscipit sed. Maecenas posuere placerat ante eu cursus. Maecenas facilisis, mauris nec hendrerit laoreet, leo mi placerat enim, in condimentum ipsum dolor ac lorem. Maecenas vestibulum lacinia vulputate. Phasellus eget metus mi. Fusce quis sollicitudin lectus, sit amet ullamcorper purus. Suspendisse dictum ante ac arcu dignissim, vel ultricies nisl gravida. Sed dapibus mauris cursus pellentesque pretium. Vivamus imperdiet fringilla laoreet.<br/><br/>

In hac habitasse platea dictumst. Morbi congue dui posuere, venenatis nunc in, laoreet leo. Sed sodales nisl quis dictum vulputate. Ut vel lorem ac arcu rhoncus auctor. Fusce elit enim, auctor at ultricies nec, blandit quis mauris. Morbi fermentum, est eu tempus rhoncus, orci nulla lobortis magna, euismod lobortis urna odio vel quam. Aliquam fermentum, nisi at adipiscing tristique, eros sapien malesuada quam, at venenatis eros turpis quis dui. Integer massa justo, vestibulum eu pharetra viverra, eleifend nec elit. In sollicitudin varius suscipit. Phasellus ac lectus in ante fringilla consectetur pellentesque vitae lectus. Sed quis magna condimentum, scelerisque turpis id, auctor arcu. Maecenas mattis magna augue, vitae faucibus nisl interdum ut. Ut sed augue vitae nibh suscipit tempor sed sed turpis. Nunc dictum eu nisi malesuada consequat. <br/><br/>
elit. Maecenas ut felis at lacus tempor commodo. Duis at massa eget orci pellentesque vehicula in eu orci. Fusce suscipit mauris non odio mollis condimentum. Phasellus sodales sapien quis ultricies eleifend. In velit lacus, elementum sit amet feugiat sed, molestie ac justo. Proin sit amet pretium est, eu vulputate justo. Donec facilisis velit sed mi mollis malesuada. Curabitur tincidunt libero elit, at lacinia velit suscipit sed. Maecenas posuere placerat ante eu cursus. Maecenas facilisis, mauris nec hendrerit laoreet, leo mi placerat enim, in condimentum ipsum dolor ac lorem. Maecenas vestibulum lacinia vulputate. Phasellus eget metus mi. Fusce quis sollicitudin lectus, sit amet ullamcorper purus. Suspendisse dictum ante ac arcu dignissim, vel ultricies nisl gravida. Sed dapibus mauris cursus pellentesque pretium. Vivamus imperdiet fringilla laoreet.<br/><br/>

In hac habitasse platea dictumst. Morbi congue dui posuere, venenatis nunc in, laoreet leo. Sed sodales nisl quis dictum vulputate. Ut vel lorem ac arcu rhoncus auctor. Fusce elit enim, auctor at ultricies nec, blandit quis mauris. Morbi fermentum, est eu tempus rhoncus, orci nulla lobortis magna, euismod lobortis urna odio vel quam. Aliquam fermentum, nisi at adipiscing tristique, eros sapien malesuada quam, at venenatis eros turpis quis dui. Integer massa justo, vestibulum eu pharetra viverra, eleifend nec elit. In sollicitudin varius suscipit. Phasellus ac lectus in ante fringilla consectetur pellentesque vitae lectus. Sed quis magna condimentum, scelerisque turpis id, auctor arcu. Maecenas mattis magna augue, vitae faucibus nisl interdum ut. Ut sed augue vitae nibh suscipit tempor sed sed turpis. Nunc dictum eu nisi malesuada consequat. <br/><br/>
elit. Maecenas ut felis at lacus tempor commodo. Duis at massa eget orci pellentesque vehicula in eu orci. Fusce suscipit mauris non odio mollis condimentum. Phasellus sodales sapien quis ultricies eleifend. In velit lacus, elementum sit amet feugiat sed, molestie ac justo. Proin sit amet pretium est, eu vulputate justo. Donec facilisis velit sed mi mollis malesuada. Curabitur tincidunt libero elit, at lacinia velit suscipit sed. Maecenas posuere placerat ante eu cursus. Maecenas facilisis, mauris nec hendrerit laoreet, leo mi placerat enim, in condimentum ipsum dolor ac lorem. Maecenas vestibulum lacinia vulputate. Phasellus eget metus mi. Fusce quis sollicitudin lectus, sit amet ullamcorper purus. Suspendisse dictum ante ac arcu dignissim, vel ultricies nisl gravida. Sed dapibus mauris cursus pellentesque pretium. Vivamus imperdiet fringilla laoreet.<br/><br/>

In hac habitasse platea dictumst. Morbi congue dui posuere, venenatis nunc in, laoreet leo. Sed sodales nisl quis dictum vulputate. Ut vel lorem ac arcu rhoncus auctor. Fusce elit enim, auctor at ultricies nec, blandit quis mauris. Morbi fermentum, est eu tempus rhoncus, orci nulla lobortis magna, euismod lobortis urna odio vel quam. Aliquam fermentum, nisi at adipiscing tristique, eros sapien malesuada quam, at venenatis eros turpis quis dui. Integer massa justo, vestibulum eu pharetra viverra, eleifend nec elit. In sollicitudin varius suscipit. Phasellus ac lectus in ante fringilla consectetur pellentesque vitae lectus. Sed quis magna condimentum, scelerisque turpis id, auctor arcu. Maecenas mattis magna augue, vitae faucibus nisl interdum ut. Ut sed augue vitae nibh suscipit tempor sed sed turpis. Nunc dictum eu nisi malesuada consequat. <br/><br/>
elit. Maecenas ut felis at lacus tempor commodo. Duis at massa eget orci pellentesque vehicula in eu orci. Fusce suscipit mauris non odio mollis condimentum. Phasellus sodales sapien quis ultricies eleifend. In velit lacus, elementum sit amet feugiat sed, molestie ac justo. Proin sit amet pretium est, eu vulputate justo. Donec facilisis velit sed mi mollis malesuada. Curabitur tincidunt libero elit, at lacinia velit suscipit sed. Maecenas posuere placerat ante eu cursus. Maecenas facilisis, mauris nec hendrerit laoreet, leo mi placerat enim, in condimentum ipsum dolor ac lorem. Maecenas vestibulum lacinia vulputate. Phasellus eget metus mi. Fusce quis sollicitudin lectus, sit amet ullamcorper purus. Suspendisse dictum ante ac arcu dignissim, vel ultricies nisl gravida. Sed dapibus mauris cursus pellentesque pretium. Vivamus imperdiet fringilla laoreet.<br/><br/>

In hac habitasse platea dictumst. Morbi congue dui posuere, venenatis nunc in, laoreet leo. Sed sodales nisl quis dictum vulputate. Ut vel lorem ac arcu rhoncus auctor. Fusce elit enim, auctor at ultricies nec, blandit quis mauris. Morbi fermentum, est eu tempus rhoncus, orci nulla lobortis magna, euismod lobortis urna odio vel quam. Aliquam fermentum, nisi at adipiscing tristique, eros sapien malesuada quam, at venenatis eros turpis quis dui. Integer massa justo, vestibulum eu pharetra viverra, eleifend nec elit. In sollicitudin varius suscipit. Phasellus ac lectus in ante fringilla consectetur pellentesque vitae lectus. Sed quis magna condimentum, scelerisque turpis id, auctor arcu. Maecenas mattis magna augue, vitae faucibus nisl interdum ut. Ut sed augue vitae nibh suscipit tempor sed sed turpis. Nunc dictum eu nisi malesuada consequat. <br/><br/>
elit. Maecenas ut felis at lacus tempor commodo. Duis at massa eget orci pellentesque vehicula in eu orci. Fusce suscipit mauris non odio mollis condimentum. Phasellus sodales sapien quis ultricies eleifend. In velit lacus, elementum sit amet feugiat sed, molestie ac justo. Proin sit amet pretium est, eu vulputate justo. Donec facilisis velit sed mi mollis malesuada. Curabitur tincidunt libero elit, at lacinia velit suscipit sed. Maecenas posuere placerat ante eu cursus. Maecenas facilisis, mauris nec hendrerit laoreet, leo mi placerat enim, in condimentum ipsum dolor ac lorem. Maecenas vestibulum lacinia vulputate. Phasellus eget metus mi. Fusce quis sollicitudin lectus, sit amet ullamcorper purus. Suspendisse dictum ante ac arcu dignissim, vel ultricies nisl gravida. Sed dapibus mauris cursus pellentesque pretium. Vivamus imperdiet fringilla laoreet.<br/><br/>

In hac habitasse platea dictumst. Morbi congue dui posuere, venenatis nunc in, laoreet leo. Sed sodales nisl quis dictum vulputate. Ut vel lorem ac arcu rhoncus auctor. Fusce elit enim, auctor at ultricies nec, blandit quis mauris. Morbi fermentum, est eu tempus rhoncus, orci nulla lobortis magna, euismod lobortis urna odio vel quam. Aliquam fermentum, nisi at adipiscing tristique, eros sapien malesuada quam, at venenatis eros turpis quis dui. Integer massa justo, vestibulum eu pharetra viverra, eleifend nec elit. In sollicitudin varius suscipit. Phasellus ac lectus in ante fringilla consectetur pellentesque vitae lectus. Sed quis magna condimentum, scelerisque turpis id, auctor arcu. Maecenas mattis magna augue, vitae faucibus nisl interdum ut. Ut sed augue vitae nibh suscipit tempor sed sed turpis. Nunc dictum eu nisi malesuada consequat. <br/><br/>

</div>



        </div>
  

CSS

 .maincontentinnercon {
    margin:0 auto;
    position: relative;
    width: 990px;
    height:auto;
    background-color: #000;
    padding-top:40px;
    padding-bottom:40px;
    padding-left:43px;
    padding-right:43px;
}

.titlecon {
    position: relative;
    float:left;
    width: 990px;
    height:47px;
    margin-bottom:13px;
}

.pcontent {
    position: relative;
    float:left;
    width: 990px;
    height:auto;}
  

Попробуйте добавить display:table; и color:#fff;

 .maincontentinnercon {
    margin:0 auto;
    position: relative;
    width: 990px;
    height:auto;
    background-color: #000;
    padding-top:40px;
    padding-bottom:40px;
    padding-left:43px;
    padding-right:43px;
    display:table;
    color:#fff;
}
  

Вот JSFiddle:
http://jsfiddle.net/4T2CB /

Просто добавьте float: left;

 .maincontentinnercon {
  margin:0 auto;
  position: relative;
  float:left;
  width: 990px;
  height:auto;
  background-color: #000;
  padding-top:40px;
  padding-bottom:40px;
  padding-left:43px;
  padding-right:43px;
}
  

Потому что все остальные ваши элементы плавающие

ПРИМЕР

Элементы имеют значение с плавающей точкой.

Вероятно, решение состоит в том, чтобы дать им overflow: hidden или clear: оба;

Можете ли вы создать скрипку, чтобы я мог ее видеть?