Question

有没有办法根据内容div扩展页面或容器？您是否需要在所有div中指定高度以使它们扩展到所需的大小？我不明白如何扩展div。

＆＃13;

html{
        height:100%;
        
    }
    body{
        margin: 0px;
        padding: 0px;
        background-color: grey;
        height:100%;
        width:100%;
    
    }
    #container{
        height:90%;
        width:80%;
        margin:auto;
        border-style: solid;
        
    }
    #header{
       height:8%;
       width:100%;
    
    }
    #head_wrap{
        height:90%;
        width:100%;
        margin:auto;
    }
    #content{
        height:70%;
        width:80%;
        margin:auto;
    }

＆＃13;

 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>basic</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
       <div id="container">
           <div id="header">
               <div id="head_wrap">
                   
               </div>
          
           
           </div>
               <div id="content">
                 
               </div>
        </div>
        
    </body>
    </html>

＆＃13;

Answer 1

使用overflow css规则根据内容扩展容器：

#container, #content{
     overflow:hidden;
}

Answer 2

使用overflow隐藏溢出的内容。

#content{
  overflow:hidden;
}

使用overflow-wrap打破溢出内容

#content{
     overflow-wrap:break-word;
}

Answer 3

永远不要以百分比设置身体的高度，请参阅此处了解更多info使用此代码替换您的身体标签

body {
    height:100vh; 
}

有没有办法根据内容扩展页面或容器？

3 个答案: