How to force child div to be 100% of parent div's height without specifying parent's height?

前端未结

关注

 26  2049

刺人心 2020-11-22 06:52

I have a site with the following structure:


      
      
        
          26条回答        

        
                    
            
            
                         
                
              
              
                
                   北荒
                                             
                
                
                (楼主)
            
              
              
                2020-11-22 07:40
              

            
            
                        
There is a bit of a contradiction in the question's title and the content.  The title speaks of a parent div, but the question makes it sound like you want two sibling divs (navigation and content) to be the same height.

Do you (a) want both navigation and content to be 100% the height of main, or (b) want navigation and content to be be same height?

I'll assume (b)...if that is so, I don't think you will be able to do it given your current page structure (at least, not with pure CSS and no scripting).  You would probably need to do something like:




and set the content div to have a left margin of whatever the width of the navigation pane is.  That way, the content's content is to the right of the navigation and you can set the navigation div to be 100% of the content's height.

EDIT: I'm doing this completely in my head, but you would probably also need to set the navigation div's left margin to a negative value or set it's absolute left to 0 to shove it back to the far left.  Problem is, there are many ways to pull this off but not all of them are going to be compatible with all browsers.