Div不会缩放到父级的100％，而是扩展到视口的100％

时间：2017-04-11 14:09:50

标签： html css

我希望桌子左边的图像缩放到桌子高度的100％。但这不会发生，它会扩展到视口，如果我使浏览器窗口不高，则图像缩小到适合。是不是高度属性应该缩放到父元素的大小？我无法理解为什么会这样。

#specieslist {
	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 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	color: green;
	display: block;
	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>

1 个答案:

答案 0 :(得分：3)

您的代码存在一些问题，从格式化开始到结束时使用tables使用divs结束时，实际上根本不需要这样做。

要回答您的问题，只要在子元素尝试使用父元素的高度时，子元素就可以引用父元素的高度。由于未明确定义父元素的高度，因此在布置所有子元素（包括图像）之后计算它，因此，当图像需要使用它时，它不可用。

以下是您可以研究的几件事：

  • 使用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。
相关问题
最新问题