Question

我写了这个CSS示例，如果内容数量不多，则可以正常工作

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        html{
            height:100%;
            margin:0px;
        }
        body{
            height:100%;
            margin:0px;
        }
        div{
            height:100%;
            margin:0px;
            background-color:red;
            width:100%;
        }
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

但是我的示例在您添加更多内容后就失败了

<div>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
   <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>

当内容数量更多时，如何编写一些CSS来包装内容？

Answer 1

当您将html的高度设置为100％时，它将body标记缩放到100％，最终限制了div的高度，要解决此问题，您有两种方法。

方法1

仅将height 100%应用于body标签

body {
  height: 100%;
  overflow: auto;
  margin: 0px;
}

div {
  height: 100%;
  background-color: red;
  width: 100%;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

方法2

在您的div中添加overflow:auto，使其自动溢出，并且基于内容，例如

body,html {
  height: 100%;
  overflow: auto;
  margin: 0px;
}

div {
  height: 100%;
  overflow:auto;
  background-color: red;
  width: 100%;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        
        </style>
    </head>
    <body>

        <div>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
            <p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
        </div>

    </body>
</html>

Answer 2

固定的宽度和固定的高度不适用于现代的响应式布局。如果您向我们提供有关视口宽度的百分比的列宽的更多具体信息，我将使用一种等距的等高列方法来更新此答案。

如何使父高包裹内容高度？

2 个答案:

方法1

方法2