堆棧內存溢出
  簡體   English   中英

Chrome和Firefox中div高度為100％的溢流看起來有所不同

[英]Overflow with div height 100% looks different in Chrome and Firefox

 原文  2017-11-24 11:14:45  9   2    html/ css/ overflow

問題描述

有人可以解釋為什么在下面的示例中，Chrome在第二行中顯示了滾動條（這是我所期望的），而Firefox在表外顯示了滾動條。 換句話說，Firefox為什么不限制第二行的高度？ 在Firefox和Chrome中如何使用？ 謝謝！ 

 <table style="width: 100%; height: 100%; border: 1px solid black;"> <tr> <td style="border: 1px solid black;"> <h1 id="titol">HELLO</h1> </td> </tr> <tr style="height: 100%;"> <td style="border: 1px solid black;"> <div style="height: 100%; overflow-y: auto;"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> </div> </td> </tr> </table>

2 個解決方案

解決方案1
 0  2017-11-25 08:57:30

<html>
<head>
    <title>Hello</title>
</head>
<body onresize="setContentHeight()" style="margin: 0; padding: 0; overflow-y: hidden;">
    <div id="header">
        <h1>HELLO</h1>
    </div>
    <div id="content" style="margin: 0; padding: 0; overflow-y: auto;">
        FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
        Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello
    </div>
</body>
<script>
function setContentHeight() {
    document.getElementById("content").style.height = document.body.clientHeight - document.getElementById("content").offsetTop;
}
setContentHeight();
</script>
</html>

解決方案2
 0 已采納  2017-11-27 07:17:12

最后，我沒有使用javascript！ 

<html>
    <head>
        <title>
            Hello
        </title>
        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }

            #container {
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            #header {
                flex-grow: 0;
            }

            #content {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow-y: auto;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>HELLO</h1>
            </div>
            <div id="content">
                FirstHello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
                Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>LastHello
            </div>
        </div>
    </body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Firefox中100％高度div上不顯示溢出滾動條 在Chrome / Firefox / Safari中，高度看起來有所不同 在Chrome / IE和FireFox中不同的桌子高度100％ 嘗試獲取高度為100％的div並自動溢出以在Firefox中工作 IE中的Div高度不同與Firefox和Chrome比較 高度為100％且溢出的div：自動 Inputbox在Firefox和Chrome中看起來有所不同 100％高度不適用於Firefox或Chrome 溢出適用於外部 100% 高度 div，但不適用於內部 100% 高度 div Div 高度 100% 導致溢出問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM