Div不會縮放到父窗口的100％，但是到視口的100％

我想讓表格左側的圖像縮放到表格高度的100％。但是這並沒有發生，它縮放到視口，如果我讓我的瀏覽器窗口變小，圖像縮小到適合。高度屬性是否應該縮放到父元素的大小？我無法追蹤爲什麼會發生這種情況。Div不會縮放到父窗口的100％，但是到視口的100％

#specieslist { 
 
\t display: inline; 
 
    font-size: 16pt; 
 
    line-height: 2em; 
 

 
} 
 

 
#abundancenumber { 
 
    color: transparent; 
 
} 
 

 
#abundancenumber:hover { 
 
    color: black; 
 
} 
 

 
#tree{ 
 
    height: 100%; 
 
    white-space: normal; 
 

 
} 
 

 
#treecontainer{ 
 
    height: 100%; 
 
    align: left; 
 
    display: inline-block; 
 
} 
 

 
#tablecontainer{ 
 
    display : inline-block; 
 
    vertical-align: top; 
 
    white-space: normal; 
 

 
} 
 

 
#container{ 
 
    white-space: nowrap; 
 
} 
 

 
h1 { 
 
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 

 
\t color: green; 
 
\t display: block; 
 
\t font-size: 3em; 
 
    font-weight: bold; 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
p, ul { 
 
    font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif; 
 
    line-height: 2em; 
 

 
    width:60%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 

 
} 
 

 

 
.occurrencecell1, .occurrencecell0 { 
 
    color: transparent; 
 
} 
 

 

 
.occurrencecell1{ 
 
    background-color: red; 
 
} 
 

 

 

 
.rTable { display: table; } 
 
.rTableRow { display: table-row; } 
 
.rTableHeading { 
 
    display: table-header-group; 
 
    font-weight: 700 
 
} 
 
.rTableBody { display: table-row-group; } 
 
.rTableFoot { display: table-footer-group; } 
 
.rTableCell { 
 
    display: table-cell; 
 
    height: 3em; 
 
    #font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif; 
 
} 
 

 
.rTableHead { 
 
    display: table-cell; 
 
    width: 8em; 
 
    word-wrap: break-word; 
 
    white-space: pre-wrap 
 

 
    font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; 
 
    font-weight: 700; 
 
}

<link rel='stylesheet' href='style.css'> 
 

 
<div id="container"> 
 

 

 

 

 
<body> 
 

 
<p>Here comes the table.</p> 
 

 

 
<div id="treecontainer"> 
 

 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PSM_V18_D630_Restoration_of_a_lepidodendron.jpg/170px-PSM_V18_D630_Restoration_of_a_lepidodendron.jpg" id="tree" alt="here is the tree"> 
 

 
</div> 
 

 

 
<div id="tablecontainer"> 
 

 
<div class="rTable"> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
      
 
      <div class="rTablehead">Most precise classification</div> 
 
      
 
      <div class="rTablehead">Abundance sample 1</div> 
 
      
 
      <div class="rTablehead">Acetaldehyde dehydrogenase, acetylating, (EC 1.2.1.10) in gene cluster for degradation of phenols, cresols, catechol 
 
</div> 
 
      
 
      <div class="rTablehead">Fumarylacetoacetate hydrolase family protein 
 
</div> 
 
      
 
      <div class="rTablehead">Intradiol ring-cleavage dioxygenase (EC 1.13.11.1) 
 
</div> 
 
      
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Genus;Sulfuricurvum</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(255, 255, 251)">0.994935871505</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Sulfuritalea hydrogenivorans</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.462437387974</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Rugosibacter aromaticivorans</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.561122358435</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Rugosibacter aromaticivorans</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.577384533061</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Rugosibacter aromaticivorans</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.545778859496</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Rugosibacter aromaticivorans</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.545779954269</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Genus;Acidovorax</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.430993166758</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Acidovorax sp. JHL-3</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.298164873689</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Acidovorax sp. JHL-3</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.275778021248</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Acidovorax sp. JHL-3</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.251830098492</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.452451191222</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.511172699188</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.490082090254</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.478207414014</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.502823943285</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Family;Comamonadaceae</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.470744436736</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.532271142742</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.535328291754</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.529046132699</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.544876275234</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.563369894866</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Order;Burkholderiales</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.549781260553</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Species;Burkholderiales bacterium RIFOXYC12_FULL_65_23</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(10, 0, 0)">-0.48417394392</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell1">1</div> 
 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 
    <div class="rTableRow"> 
 

 
     
 
     <div class="rTableCell">Genus;Sulfuricurvum</div> 
 
     <div class="rTableCell" id="abundancenumber" style="background-color: rgb(255, 255, 255)">1.0</div> 
 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
      
 
       <div class="rTableCell occurrencecell0">nan</div> 
 

 
      
 

 

 
     
 

 
     
 

 

 

 

 
    </div> 
 

 

 

 
</div> 
 
</div> 
 

 

 

 

 

 

 

 

 
</div> 
 

 
</body>

來源

2017-04-11 Plumpie

有幾件事情你的代碼錯誤，從格式化，並開始使用divs時真的不需要這樣的模擬tables結束。

要回答你的問題，只要父元素的高度在子元素嘗試使用它時可用，子元素就可以引用父元素的高度。由於父元素的高度沒有明確定義，因此在對所有子元素（包括圖像）進行佈局後計算，因此在圖像需要使用時無法使用。

這裏有幾件事情你可以看看：

使用CSS3 flexbox奠定了image和#tablecontainer。你可以在這裏找到一個快速教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
使用position: absolute在image和position: relative在#container。絕對放置一個元素會將其從常規佈局流程中移除，並允許您使用父級的計算高度。您還需要在#tablecontainer的左側添加其他填充，如果您選擇走這條路線（因爲圖像將被重疊覆蓋）。
將圖像設置爲#container的背景，並使用background-size: contain和background-position來調整其位置。如上所述，您需要在#tablecontainer的左側添加其他填充。你可以做的一種方法是設置padding-left。

來源

2017-04-11 14:44:04 Sebastian

感謝您的幫助，我目前正在實施flexbox解決方案。但是不是佈局不斷更新？如果我的視口縮放，我的圖像會縮放，那麼爲什麼當其中一個div更改大小時圖像不能縮放？ – Plumpie

也應該如何使用flex做這個佈局？我設置爲容器來顯示：inline-flex，從圖像中刪除％高度，現在它工作。這個可以嗎？ – Plumpie

Div不會縮放到父窗口的100％，但是到視口的100％

回答

相關問題