1

我正在玩 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 标记的大小。

任何人都可以解释为什么会这样吗？谢谢！！！

4

1 回答 1

1

这就是 div 默认的行为方式。如果您希望它显示一定的高度，则必须使用

height:XXpx;

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

于 2013-05-06T09:23:26.530 回答