Question

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

有人可以解释为什么会这样吗？谢谢！！！

Answer 1

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

指定它

height:XXpx;

这背后的原因是这些日子里的内容是动态的，即随着时间的推移而变化很大。每次内容改变时手动更改高度都很麻烦。

DIV标签根据内容改变大小

1 个答案: