即使父母設置了高度，元素也不會響應設置的高度

我一直在困惑這一點的HTML/CSS幾個小時，我無法弄清楚我要出錯的地方。它是更復雜佈局的一部分，但我想我已經隔離了這個問題。即使父母設置了高度，元素也不會響應設置的高度

這是我的HTML：

<table> 
    <tr> 
     <td> 
      <div class = "outer"> 
       <div class = "middle"> 
        <div class = "inner"> 
         <svg viewbox = "0, 0, 250, 250"> 
         </svg> 
        </div> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table>

...這是我的CSS：

* { 
    margin: 0px; 
    padding: 0px; 
} 
body,html { 
    height: 100%; 
    font-family: sans-serif; 
    font-size: 12px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;  
    box-sizing: border-box;  
    -webkit-text-size-adjust: none; 
} 
table { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    min-width: 600px; 
    /*table-layout: fixed;*/ 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

tr { 
    background-color: #ffffff; 
    height: 100%; 
    height: calc(100% - 190px); 
} 

td { 
    height: 100%; 
    background-color: red; 
    margin: 0; 
} 

.outer { 
    width: 94%; 
    width: calc(100% - 20px); 
    height: 94%; 
    height: calc(100% - 20px); 
    background-color: blue; 
    display: block; 
    margin: 3%; 
    margin: calc(10px + 0%); 
    overflow-y: scroll; 
} 
.middle { 
    display: white; 
    background-color: lightblue; 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    height: calc(100% - 10px - 2.5rem); 
    overflow-y: scroll; 
} 

.inner { 
    background-color: pink; 
    display: block; 
    width: 40%; 
    height: 100%; 
    overflow: hidden; 
} 

svg { 
    height: auto; 
    max-height: 100%; 
    width: auto; 
    max-width: 100%; 
    background-color: salmon; 
}

如果去掉SVG，的div和表格的行爲，因爲我想 - 在窗口調整大小，表格不超過頁面的大小，並且div都相應地縮放。

當您包含svg時，我期望的（以及我想要的）是讓svg適合.inner div，但不要超過它或以任何方式更改佈局流。這不是發生了什麼事。

我已經在Safari和Firefox中檢查了這一點，並且都給了我意想不到的結果。在Firefox中，如果窗口縮小超過某個點，則svg高度會展開，整個窗口將滾動。

在Safari中，svg高度隨着寬度的變化而變化，但寬度並不隨高度變化而變大。

這似乎是一個非常簡單的事情，我真的不知道我要去哪裏錯了。我相信這是某種明顯的菜鳥錯誤。我已經嘗試了svg上的每個最大/最小高度/寬度的組合。

感謝您的幫助！

編輯：如果我擺脫表（刪除表，td，tr）一切都按預期工作。同樣，如果我擺脫了svg並保持桌子，一切都按預期工作。

來源

2016-04-09 Martha

_「如果我擺脫了表[...]」_ - 你有實際的表格數據在這裏顯示？如果不是的話，你應該擺脫桌子出於這個原因已經... – CBroe

這是更大的佈局的一部分確實需要表格，因爲我需要整個內容被拆分成垂直居中內容的行，並佔用100％的屏幕高度。我試過用div做這個，遇到了很多問題。 – Martha

由於stated here，您無法爲svg元素設置寬度/高度值auto。使用100%的高度和寬度，而不是像這樣：

svg { 
    height: 100%; 
    max-height: 100%; 
    width: 100%; 
    max-width: 100%; 
    background-color: salmon; 
}

如果問題仍然存在，嘗試添加height和width財產爲內嵌樣式聲明的SVG，看看是否能解決問題：

<svg style="width:100% max-width:100%; height: 100%; max-height: 100%;" viewbox = "0, 0, 250, 250"></svg>

來源

2016-04-09 20:42:58

這不行，我很害怕！我得到同樣的結果。我不明白的主要原因是窗口大小如何影響窗口大小 - 在某些窗口大小下它的行爲是正確的，而在其他窗口大小上，似乎無法通過％設置高度。 – Martha

...更重要的是：在某些窗口尺寸下，它將100％的高度視爲指向父級的高度，而在其他情況下，就好像它指的是父級的父級的高度，而在其他情況下則視爲不是祖先的高度具有一定的高度。 – Martha

@Martha您能否給我一個鏈接到您正在實施svg的網站？ –

你錯過給予高度上tbody

tbody { 
    height: 100%; 
}

其實瀏覽器automaticall如果不添加，請在表格中添加tbody。你可以看到這在檢查元素

來源

2016-04-10 08:10:02

即使父母設置了高度，元素也不會響應設置的高度

回答

相關問題