CSS：制作“溢流”网页上不段的绝对位置

我有我的网页上的标题和内容。内容应该可以在其自己的部分中滚动，以便用户可以滚动浏览内容中的所有文本而不会忽略标题。CSS：制作“溢流”网页上不段的绝对位置

这是可行的代码：

position: absolute; 
    overflow-y:scroll;

但是，这导致与所述报头中的内容重叠。因此，我定义了top:80px;但这只适用于某些屏幕尺寸。如果缩小窗口，则标题会再次与内容重叠。

我想要的内容开始不到头，但也有被不失查看标题的滚动属性。

这里是一个小提琴我当前的设置： https://jsfiddle.net/14zckot2/6/

编辑1

添加：

max-height: 100vh; 
    overflow-y:scroll;

代替

position: absolute; 
    overflow-y:scroll;

工作Ë除了溢出应该从窗口的底部开始，而是从窗口底部开始（它低于窗口底部的量等于头部的高度）。

我如何设置max-height等于窗口的高度 - 如果头的高度，或有点等同是内容的开始和窗口的末端之间的距离？

来源

2016-11-15 Romulus

您必须指定一些最大高度为content并删除position:absolute。由此它不会重叠标题。

#header { 
 
    font-size: 30px; 
 
} 
 
#content { 
 
    text-align: center; 
 
    padding: 20px; 
 
    color: #000; 
 
    clear: both; 
 
    bottom: 0px; 
 
    top: 80px; 
 
    left: 0%; 
 
    right: 21%; 
 
    overflow-y: scroll; 
 
    overflow-x: scroll; 
 
    max-height: 80px; 
 
}

<div id=header> 
 
    This is my header and its size sometimes fits and sometimes doesnt depending on screen width 
 
</div> 
 
<div id=content> 
 
    This is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my 
 
    paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph 
 

 
</div>

来源

2016-11-15 07:36:24

是否可以在最大高度与高度之头之间的一个解决方案和屏幕的底部？ – Romulus

是的，你可以通过添加标题和内容之间像''

并指定CSS'{。空间高度：10px的;}' –

后，我做的，什么是'最大高度后的值：'？因为，“最大高度：100vh”等于窗户的整个高度。我想'最大高度：100vh - 标题高度vh'但我不知道标题高度，因为它的动态。 – Romulus

下面是使用Flex-BOX（不与IE9工作）

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

#header { 
    flex: 1 0 auto; 
} 

#body { 
    flex: 1 1 auto; 
}

https://jsfiddle.net/wc2wb8q1/

来源

2016-11-15 08:02:42 Hp93

CSS：制作“溢流”网页上不段的绝对位置

回答

相关问题