0

Is there a way to expand a page or container based on content divs? Do you need to specify the height in all divs in order for them to expand to the desired size? I am not understanding how to expand divs.

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>
Arjan Knol
  • 942
  • 5
  • 20
jonmo1990
  • 111
  • 1
  • 7

3 Answers3

1

Use overflow css rule to expand container based on content:

#container, #content{
     overflow:hidden;
}
M.Hamza Mehmood
  • 123
  • 7
0

Use overflow to hide overflowing content.

#content{
  overflow:hidden;
}

Use overflow-wrap to break overflowing content

#content{
     overflow-wrap:break-word;
}
aslantorret
  • 273
  • 4
  • 10
0

Never set the height of the body in percentage, see here for more info replace your body tag with this code

body {
    height:100vh; 
}
Manoj Kadolkar
  • 717
  • 8
  • 22