1. 首頁
  2. 問答
  3. HTML5靈活盒模型的高度計算

HTML5靈活盒模型的高度計算

2011-10-06 56 views
19

研究了一整天的靈活盒模型之後，我必須說，我真的很喜歡它。它以快速和乾淨的方式實現了我在JavaScript中實現的功能。然而，有一件事卻讓我感到茫然：HTML5靈活盒模型的高度計算

我無法擴展div來獲取由靈活盒子模型計算的全尺寸！

來說明吧，我會證明是一個例子。其中兩個靈活的地方採用精確的高度和高度，但其中的div只需要"<p>...</p>"元素的高度。在這個例子中也沒關係，但我原本是想被放置一個「靈活的盒子模型」內的另一個「靈活的盒子模型」，這必須在我看來是可能的

html, body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#box-1 { 
 
    background-color: #E8B15B; 
 

 
} 
 
#box-2 { 
 
    background-color: #C1D652; 
 
} 
 
#main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
} 
 

 

 
.flexbox { 
 
    display:-moz-box; 
 
    display:-webkit-box; 
 
    display: box; 
 
    text-align: left; 
 
    overflow: auto; 
 
} 
 
H1 { 
 
    width: auto; 
 
} 
 
#box-1 { 
 
    height: auto; 
 
    -moz-box-orient: vertical; 
 
    -webkit-box-orient: vertical; 
 
    box-orient: vertical; 
 

 
    -moz-box-flex: 3; 
 
    -webkit-box-flex: 3; 
 
    box-flex: 3; 
 
} 
 
#box-2 { 
 
    height: auto; 
 
    min-width: 50px; 
 
    -moz-box-orient: vertical; 
 
    -webkit-box-orient: vertical; 
 
    box-orient: vertical; 
 

 
    -moz-box-flex: 1; 
 
    -webkit-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 
#fullsize{ 
 
    background-color: red; 
 
    height: 100%; 
 
}
<div id="main" class="flexbox"> 
 
    <div id="box-1" class="flexbox"> 
 
    <div id="fullsize"> 
 
     <p>Hallo welt</p> 
 
    </div> 
 

 
    </div> 
 
    <div id="box-2" class="flexbox"> 
 

 
    </div> 
 
</div>

來源

2011-10-06 Stefan

回答

34

我一直在與自己搏鬥，但終於設法提出了一個解決方案。

看到這個jsFiddle，雖然我只加了前綴的WebKit在Chrome如此開放。

基本上，你有2個問題，我會分開處理。

  1. 獲得柔性項的孩子填寫身高100％
    • 設置position:relative;對孩子的父母。
    • 設置position:absolute;對孩子。
    • 然後，您可以根據需要設置寬度/高度（在我的示例中爲100％）。
  2. 固定容量調整滾動 「怪癖」 在Chrome
    • 將overflow-y:auto;上滾動的DIV。
    • 可滾動div必須具有指定的顯式高度。我的樣品已經具有高度的100％，但如果已經應用於無你可以指定height:0;

上滾動問題的詳細信息，請參閱本answer。

來源

2013-03-13 14:33:46

+1

「height：100％」是否發出webkit錯誤？或者是W3C建議中定義的那個？ – Xenos

0

既然對這個問題有一些興趣，我會給你我目前找到的解決方案。它是在Chrome中測試的（目前沒有其他瀏覽器使用這個示例，但在FF中工作時又有更大的工作量，當我「簡單地工作」時，這種工作方式不起作用）。

背後的想法是，以某種方式使嵌套在柔性盒內的元素延伸到彈性框元素的全尺寸。爲此，在內部添加絕對位置元素，其距離左側，右側，頂部和底部的距離爲0。

然而，即使在鍍鉻，有一個錯誤，downsizeing和調整大小的元件，使得所述滾動條在前看不見時。

下面是HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>flexbox example - 2 column layout</title> 
    <meta name="author" content="Gwilym Johnston"> 
    <style type="text/css"> 
    html, body{ 
     height: 100%; 
     margin: 0px; 
    } 
    #box-orient-example { 
     -moz-box-orient: horizontal; 
     -webkit-box-orient: horizontal; 
     -ms-box-orient: horizontal; 
     box-orient: horizontal; 
     display: -moz-box; 
     display: -webkit-box; 
     display: -ms-box; 
     display: box; 
     height: 100%; 
     overflow: auto; 
    } 
    #box1 { 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     -ms-box-flex: 1; 
     background: none repeat scroll 0 0 lightblue; 
     text-align: center; 
     overflow: auto; 
     position: relative; 
    } 
    #box2 { 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     -ms-box-flex: 1; 
     background: none repeat scroll 0 0 #DDDDDD; 
     text-align: center; 
     overflow: auto; 
     position: relative; 
    } 

    .abs { 
     position: absolute; 
     top: 0; 
     right: 0; 
     left: 0; 
     bottom: 0; 
    } 
    .rel{ 
     position: relative; 
    } 
    </style> 
</head> 
<body> 
    <div id="box-orient-example" class="example"> 
     <div id="box1"> 
      <div class="abs"> 
       <div class="rel"> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </div> 
      </div> 
     </div> 
     <div id="box2"> 
      <div class="abs"> 
       <div class="rel"> 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-01-09 10:15:05 Stefan

2

你也必須要擴展柔性盒以及div和添加柔性值。 這解決了這個問題。

#fullsize{ 
    background-color: red; 

    display: -webkit-box; 
    display: box; 
    display: -moz-box; 

    box-flex:1; 
    -webkit-box-flex:1; 
    -moz-box-flex:1; 
}

來源

2012-05-03 09:51:23

相關問題

 相關問題