一个div的高度答案

【问题标题】：Height of a div一个div的高度
【发布时间】：2012-06-19 00:03:54
【问题描述】：

div 的高度

我正在尝试根据其内容设置 div 的大小。查看完整代码here。基本上我的问题出在 div: content

在 HTML 代码中查找注释：错误

必须添加一个标签 p，我明确表示 div 对齐到末尾。没有这个明确，div 会剪切图像。

实际上，我想知道一个更好的方法来完成这项任务。

似乎有一个很好的地方 p 里面什么都没有，只有一个明确的类，这样这个问题就不会发生。你给我推荐什么？有更好的方法来完成这项任务吗？

目标是不让绳子div内容：

HTML

<div id="header">
    <div class="headerLeft" />
</div>

<div id="waycontact">
    <div class="contactPaula">
        <p>paulaMACHADO</p>
        <p>crea 11111/D-MG</p>
        <p>(00) 0000 0000</p>
    </div>
    <div class="contactBeatriz">
        <p>beatrizDAMAS</p>
        <p>crea 22222/D-MG</p>
        <p>(00) 0000 0000</p>
    </div>
    <div class="address">
        <p>av. xxxxxxxl, yyy, sl. zzz, centro - belo horizonte - mg</p>
        <p>cep: 00000-000 - telefax: (00) 0000 0000</p>
        <p><a href="mailto:xxxxx@yyyy.com.br">xxxxx@yyyy.com.br</a></p>
    </div>
</div>

<div id="content">
    <img class="left" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
    <h2>Sobre a empresa</h2>
    <p>A AMSD é focada em qualidade..</p>
    <p class="clear" /> <!--Wrongly!! -->
</div>

<div id="footer">
    <a class="current" href="#">home</a>
    |
    <a href="#">quem somos</a>
    |
    <a href="#">blog</a>
    |
    <a href="#">na mídia</a>
    |
    <a href="#">fale conosco</a>
</div>

CSS

body
{
    font-size: 0.87em;
    font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
    margin: 0;
    padding: 0;
    color: #666666;
}

a:link
{
    color: rgb(124,71,111);
    text-decoration: underline;
}
a:visited
{
    color: rgb(41, 12, 36);
}
a:hover
{
    color: rgb(91,25,79);
    text-decoration: none;
}
a:active
{
    color: #AB6D9C;
}

p
{
    margin:2px;
}

ul
{
    list-style-type: square;
}
li
{
    line-height: 165%;
}
div#header
{
    width:1024px;
    margin:5px auto;
    height:150px;
    background-color: rgb(91,25,79);
}
div.headerLeft
{
    height:100%;
    width:900px;
    border-right:10px solid rgb(169, 171, 174);
    background-color: rgb(124,71,111);
}
div#footer
{
    margin-top:10px;
    text-align:center;
    position:relative;
    font-size: 1.27em;

}
div#content
{
    margin:auto 40px;
    width:200;
    border:2px solid red;
}


/* Others
-----------------------------------------------------------*/
div.contactPaula p, div.contactBeatriz p
{
    padding:0px;
    margin:0px;
}
div.contact, div.contactPaula, div.contactBeatriz
{
    margin-bottom:15px;
    margin-top:0px;
}
div.contactBeatriz
{
    float:right;
    text-align:right;
}
div.contactPaula
{
    float:left;
    text-align:left;
}

div.address
{
    text-align:center;
    margin-bottom:30px;
}

div#waycontact
{
    width:340px;
    margin:20px 40px;
}
.clear, div.address, div#footer, div#waycontact
{
    clear:both;
}
.left
{
    float:left;
}

a.current
{
    font-weight:bold;
}

【问题讨论】：

看到红色边缘的div，他不能剪切图像。我通过创建一个带有 clear: both 下面的 p 来解决这个问题，但看起来不太好。我还能怎么做？为什么会这样？

标签： css layout html

【解决方案1】：

添加一个“溢出：隐藏；”到 div#content 所以它看起来像下面这样。您不需要单独的 clear 属性和 p 标签。祝你好运:)

div#content
{
    margin:auto 40px;
    width:200;
    border:2px solid red;
    overflow:hidden;

}

【讨论】：

【解决方案2】：

要使容器扩展以填充浮动元素，请给它一个溢出属性：

div.wrapper {
    overflow: auto;
}

【讨论】：

这将使它有滚动条。
非常好！谢谢！你知道我在哪里可以找到更多材料来研究这个属性吗？
我为你找到了这个教程。如果你有任何问题，请不要犹豫：）css-tricks.com/the-css-overflow-property
@alex：只有当你给它一个固定的高度时。 @Riderman，很高兴我能帮上忙（尽管我想知道为什么当我说同样的话时你给了 Sara 的答案。;）

【解决方案3】：

比使用空的<div class="clear"> 更好的方法是使用“cearfix”方法。

这是直接从HTML5Bolierplate 借来的示例，只需将其应用于给您带来麻烦的 div 即可。

在您的情况下，#content 将变为 #content.clearfix

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1;

【讨论】：