发表新帖
发表新帖

how to size a div's height to its container height, using CSS?

后端 未结
关注
14 1967
太阳男子
太阳男子 2020-12-16 19:34

How to size a div\'s height to its container height, using CSS ?



    


        

                      

              相关标签:
       

      

      
      

        

          14条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  暗喜        
                
              
    
                            
    
                2020-12-16 19:56
              
    
            
    
            
    
                                                                       

    You can tell the container div to display as table and have the inner div to display as a table cell.
    


    The HTML
    


    <body>
<div id="wrap">
    <div id="header">
        <h1>
            My Header</h1>
    </div>
    <div id="main">
        <ul id="nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <div id="primaryContent">

        </div>
    </div>
    <div id="footer">
        <h1>
            My Footer</h1>
    </div>
</div>

    


    

    


    The CSS
    


    #wrap
{
    width: 800px;
    margin: auto;
}

#header
{
    background: red;
}

#main
{
    display: table;
}

#nav
{
    background: gray;
    width: 150px;
    display: table-cell;
}

#primaryContent
{
    background: yellow;
    padding: 0 .5em;
    display: table-cell;
}

    


    Fixes for IE
    


        #wrap 
{
    width: 800px;
    margin: auto;
}

#header, #footer
{
    background: red;
}

#main 
{
    background: url(../bg.png) repeat-y;
}

#nav 
{
    background: gray;
    width: 150px;
    float: left;
}

#primaryContent 
{
    background: yellow;
    margin-left: 150px;
    padding: 0 .5em;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  感动是毒        
                
              
    
                            
    
                2020-12-16 20:01
              
    
            
    
            
    
                                                                       

    I did something similar to KyokoHunter:
    


    $('div.row').each(function(){
     var rowHeight = $(this).innerHeight();
     $(this).children('div.column').css('height',rowHeight);
});

    


    This goes through every row in a div "table" and makes the heights all match, as long as the divs are classed accordingly.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复
热议问题