CSS - 滾動內容不正確展開

的問題是這樣的（https://jsfiddle.net/Lpm2ghsr/4/）CSS - 滾動內容不正確展開

在滾動時，您可以通過背景顏色。內容的高度是某種相同的容器中看到而不是擴大到實際內容的高度。

將「height：100％」添加到內容中似乎不起作用，因爲100％意味着與其父項相同的高度。

我已經嘗試在.content中添加「overflow：auto」，但它不是我想要的，因爲滾動條應該在外面，如示例中所示。

下面是HTML標記

<header></header> 
<div class="container"> 
    <section class="content"> 
    <pre>some text 
    some text 
    some text 
    some text 
    some text 
    some text</pre> 
    </section> 
</div>

而CSS：

body{ 
    overflow: hidden; 
    width: 99%; 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
} 
header{ 
    height: 100px; 
    width: 100%; 
    background-color: black; 
} 

.container{ 
    display: flex; 
    overflow: auto; 
    width: 100%; 
    height: calc(100% - 100px); 
    position: relative; 
} 
.content{ 
    width: 100%; 
    background-color: #bbb; 
} 

pre{ 
    width: 100%; 
    font-size: 2rem; 
}

來源

2017-02-14 Cheng Chu Lin

爲什麼在'.container中有'height：calc（100％ - 100px）'？如果你將它設置爲100％，它應該可以工作。我注意到的另一個問題是你的section/div結束標記是錯誤的。 – Dana

這個？ https://jsfiddle.net/Lpm2ghsr/3/ –

@Dana謝謝，我已更正了標籤。由於標題爲100px，所以.container應該排除100px，不是嗎？將其設置爲100％將使滾動條過長，以至於它會消失在底部。 –

我希望這是最簡單的方法。嘗試這個。

您的主要內容是在「內容」類中，因此將高度應用於內容類。嘗試下面的修改代碼。

.container{ 
    display: flex; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.content{ 
    width: 100%; 
    height: calc(100% - 100px); 
    background-color: #bbb; 
    overflow: auto; 
}

來源

2017-02-14 03:20:19

這正是我想要的！謝謝！但有一個問題，溢出：auto;必須應用於.container？ –

不需要，因爲我們已經將容器的高度設置爲100％，所以只需要內容的溢出。 –

將.container顯示更改爲從flex阻止，它將起作用。

.container { 
    display: block; 
}

來源

2017-02-14 04:15:22 Rakesh

不幸的是，我必須爲其子元素的佈局保持display：flex。內容實際上比在示例中更復雜。對不起，沒有在問題中說清楚。 –

CSS - 滾動內容不正確展開

回答

相關問題