发表新帖
发表新帖

How to stretch div height to fill parent div - CSS

后端 未结
关注
7 1383
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-02 10:05

I have a page with divs like below


    

    

    

        


        

                      

              相关标签:
       

      

      
      

        

          7条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  感动是毒        
                
              
    
                            
    
                2020-12-02 10:43
              
    
            
    
            
    
                                                                       

    Simply add height: 100%; onto the #B2 styling. min-height shouldn't be necessary.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  臣服心动        
                
              
    
                            
    
                2020-12-02 10:44
              
    
            
    
            
    
                                                                       

    http://jsfiddle.net/QWDxr/1/
    


    Use the "min-height" property
    
Be wary of paddings, margins and borders :)
    


    html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  北荒        
                
              
    
                            
    
                2020-12-02 10:57
              
    
            
    
            
    
                                                                       

    Suppose you have
    


    <body>
  <div id="root" />
</body>

    


    With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html
    


    #root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

    


    With flexbox, you can
    


    html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  没有蜡笔的小新        
                
              
    
                            
    
                2020-12-02 10:57
              
    
            
    
            
    
                                                                       

    What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.
    


    What worked, at least on firefox, was this
    


    <div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">
    


    Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.
    


    Hope this saves someone some time.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  萌比男神i        
                
              
    
                            
    
                2020-12-02 10:58
              
    
            
    
            
    
                                                                       

    I'd solve it with a javascript solution (jQUery) if the sizes can vary.
    


    window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  眼角桃花        
                
              
    
                            
    
                2020-12-02 11:06
              
    
            
    
            
    
                                                                       

    B2 container position relative
    


    Top position B2 + of remaining height
    


    Height of B2 + height B1 or remaining height
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    

    

          
 
     
 

        
热议问题