如何将嵌套的内部div设置为100％的高度？

看来我只能将第一个最外面的div（#base_wrapper）设置为100％。我还没有找到一种方法来设置任何内部嵌套div的高度为100％的高度。如何将嵌套的内部div设置为100％的高度？

有谁知道如何正确地做到这一点？

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      html { 
       height: 100%; 
      } 
      body { 
       background-color: #FFF; 
       font-family: helvetica, arial, sans-serif; 
       font-size: 10pt; 
       color: #000; 
       margin: 0px; 
       padding: 0px; 
       height: 100%; 
       border: none; 
      } 
      #base_wrapper { 
       min-height: 100%; 
       background-color: #F00; 
      } 
      #base_inner_wrapper { 
       min-height: 100%; /* does not work */ 
       padding-bottom: 16px; 
       background-color: #0F0; 
      } 
      #base_body { 
       min-height: 100%; /* does not work */ 
       background-color: #00F; 
      } 
      #base_statusbar { 
       background: #25272B; 
       height: 16px; 
      } 
      #base_footer { 
       height: 16px; 
       width: 100%; 
       color: #F47920; 
       position: absolute; 
       bottom: 0; 
       background: #25272B; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="base_wrapper"> 
      <div id="base_statusbar"> 
       HEADER 
      </div> 
      <div id="base_inner_wrapper"> 
       <div id="base_body"> 
        CONTENT 
       </div> 
      </div> 
      <div id="base_footer"> 
       FOOTER 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-02-24 Fabian Barkhau

3格内的div并且均具有100％的高度？ 300％？ – 2013-02-24 19:15:05

而是在你的CSS设置min-height的，只要设置height。

生成的代码应工作：

body { 
    background-color: #FFF; 
    font-family: helvetica, arial, sans-serif; 
    font-size: 10pt; 
    color: #000; 
    margin: 0px; 
    padding: 0px; 
    height: 100%; /* changed from min-height */ 
    border: none; 
} 
#base_wrapper { 
    height: 100%; /* changed from min-height */ 
    background-color: #F00; 
} 
#base_inner_wrapper { 
    height: 100%; /* changed from min-height */ 
    padding-bottom: 16px; 
    background-color: #0F0; 
} 
#base_body { 
    height: 100%; /* changed from min-height */ 
    background-color: #00F; 
}

欲了解更多信息，请参见： Percentage Height HTML 5/CSS

来源

2013-02-24 22:27:25 ASGM

如何将嵌套的内部div设置为100％的高度？

回答

相关问题