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 - 滚动内容不正确展开

回答

相关问题