可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Browser shows div only when I set exact height. But i want to create resizable div according it's contents. Tried height: auto and height:100%. It doesn't help.

My div looks like that. It's background div of sidebars and content.

.wrapper
    {
        width: 80%;
        height:200px;
        max-width: 1260px;
        min-width: 780px;
        margin: 0 auto;     
        background-image:url(core/design/img/transfff.png);
        -moz-border-radius: 15px 15px 0px 0px;
        border-radius: 15px 15px 0px 0px;
    }

UPDATE my html looks like that

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-image: url(core/design/img/bg.png);
    background-position:top left;
    background-size:100%;
    background-color:#fff;
    background-repeat:no-repeat;
    margin: 0;
    padding: 0;
    color: #000;
}


ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px; 
a img { 
    border: none;
}

a:link {
    color:#414958;
    text-decoration: underline; 
}
a:visited {
    color: #4E5869;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}


.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    margin: 0 auto; 
}

.wrapper
{
    width: 80%;
    height:200px;
    max-width: 1260px;
    min-width: 780px;
    margin: 0 auto; 
    background-image:url(core/design/img/transfff.png);
    -moz-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
    overflow: visible
}

.header {
padding:20px;
}

.sidebar1 {
    float: left;
    width: 20%;

    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 60%;
    float: left;
}
.sidebar2 {
    float: left;
    width: 20%;

    padding: 10px 0;
}

.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}


ul.nav {
    list-style: none; 
    border-top: 1px solid #666; 
    margin-bottom: 15px; 
}
ul.nav li {
    border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited{
    padding: 5px 5px 5px 15px;
    display: block; 
    text-decoration: none;
    color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background: #6F7D94;
    color: #FFF;
}

/* ~~The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;
    clear: both;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { /
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="core/design/img/logo.png" alt="Insert Logo Here" name="Insert_logo" width="438px" height="95" id="Insert_logo" style=" display:block; margin:0 auto;" /></a> 
    <!-- end .header --></div>
    <div class="wrapper">
  <div class="sidebar1">
</div>
  <div class="content">
    </div>
  <div class="sidebar2">
  </div>
    </div>
  <div class="footer">
  </div>
</div>
</body>
</html>

回答1:

div's will naturally resize in accordance with their content.

If you set no height on your div, it will expand to contain its conent.

An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div (wrapper) clears the floats.

Here's some ways to do this:

#wrapper{
overflow:hidden;
}

#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}

回答2:

make sure the content inside your div ended with clear:both style

回答3:

Here is the Latest solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
content: "";
display: table;
clear: both;
}

Then, in your HTML, add the .clearfix class to your parent Div. For example:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "".

Source: http://css-snippets.com/page/2/

回答4:

According to this, you need to assign a height to the element in which the div is contained in order for 100% height to work. Does that work for you?

回答5:

As stated earlier by Jamie Dixon, a floated <div> is taken out of normal flow. All content that is still within normal flow will ignore it completely and not make space for it.

Try putting a different colored border border:solid 1px orange; around each of your <div> elements to see what they're doing. You might start by removing the floats and putting some dummy text inside the div. Then style them one at a time to get the desired layout.