Question

我遇到了问题，只显示了约100px的背景色。我希望背景颜色随文本一起流动。我没有设置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

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

Answer 3

元素有浮动。

可能解决方案是给它们溢出：隐藏或清除：两者;

你可以做一个小提琴，这样我就能看到它吗？

在自动高度div中切断的背景颜色

3 个答案: