自动高度 div 中的背景颜色截止

Question

我有一个问题，只显示了大约 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;}

Answer 1

尝试添加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/

Answer 2

元素有一个浮点数。

可能的解决方案是让它们溢出：隐藏或清除：两者；

你能做一个小提琴让我看看吗？

Answer 3

只需添加 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;
}

因为你所有的其他元素都是浮动的

EXAMPLE