DIV 标签根据内容改变大小答案

【问题标题】：DIV tags changing size depending on contentDIV 标签根据内容改变大小
【发布时间】：2013-05-06 09:16:11
【问题描述】：

我正在玩 HTML 和 CSS。我目前有以下内容：

/*Reset margins & padding*/
body, h1, h2, h3, h4, h5, h6, p, div, ul, li {
    margin: 0;
    padding: 0;
}

body {
    background: #CCCCCC;
    font-family: sans-serif;
    color: #000;
}

#divWrapper {
    width: 90%;
    margin: 0 auto;
}

#divHeader {
    width: 100%;
    background: #CC0000;
    text-align: center;

    /* Margins */
    margin-top: 20px;
    margin-bottom: 0px;

    /* Radius */
    border-radius: 5px;
}

#divMenuStrip {
    width: 100%;
    background: #646464;
    text-align: center;

    /* Margins */
    margin-top: 10px;

    /* Padding */
    padding-left: 5px;
    padding-right: 5px;


    /* Radius */
    border-radius: 5px;
}

#divContent {
    width: 100%;
    background: #ffffff;

    /* Margins */
    margin-top: 10px;

    /* Padding */
    padding: 8px;

    /* Radius */
    border-radius: 5px;
}

和...

    <!DOCTYPE html>
 <html>
    <head>
        <link rel="stylesheet" type="text/css" href="./styles/main.css">
    </head>

    <body>
        <div id="divWrapper">

                <div id="divHeader"><img src="./images/headers/header-1.jpg" /></div>
                <div id="divMenuStrip">This is where the menu will be displayed</div>   
                <div id="divContent">This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed. This is where the content will be displayed.  </div>
        </div>
    </body>
</html>

当我在我的网络浏览器中加载 HTML 页面时，它看起来好像取决于 div 标记中的文本内容量，它们会影响我的 div 标记的大小。

谁能解释这是为什么？谢谢！！！

【问题讨论】：

您能说得更具体一点吗？就其性质而言，div 和其他此类元素会扩展以适应其内容。（避免在上面设置高度。在大多数情况下，这会导致布局灾难。）
设置高度有何遗憾？我想将整个网站的内容限制为页面的 90%（因为包装器设置为 90%）。然后我希望每个其他 div 都成为全宽。这是整个屏幕分辨率的 90%。
jsfiddle.net/6zLbC
只是为了澄清我之前的评论，我想保持宽度不变。 Shibin Ragh 发布的链接显示了我在说什么。红色比灰色小，比白色小。我希望它们都是屏幕宽度的 90%。我知道如何使用表格来做到这一点，但我可以使用 div 来做到这一点吗？

标签： css html tags

【解决方案1】：

这是 div 默认的行为方式。如果你想让它显示一定的高度，你必须用

指定它

height:XXpx;

这背后的原因是这些天的内容是动态的，即随着时间的推移会发生很大变化。每次内容更改时手动更改高度会很麻烦。

【讨论】：

对不起，还有其他人有回应吗？ :-)
我查看了您的 cmets，我认为您的问题有误。你能解释一下你到底在找什么吗？是你要固定的高度还是宽度？？？