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

时间:2017-05-26 10:22:27

标签: html css layout

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



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;
    }

 <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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

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

#container, #content{
     overflow:hidden;
}

答案 1 :(得分:0)

使用overflow隐藏溢出的内容。

#content{
  overflow:hidden;
}

使用overflow-wrap打破溢出内容

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

答案 2 :(得分:0)

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

body {
    height:100vh; 
}