Question

我<pre>内有<div>个元素。此<div>是绝对定位的，宽度和高度设置为100％。有时<pre>元素的高度大于主<div>，因此它跳出页面。如何设置此<pre>元素，使其在不跳出页面的情况下填充其余高度

<div class="window">

<pre class="prettyprint code"><xmp>

...some large piece of code

</xmp></pre>

CSS

.window{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
        display: inline-block;
}

.code{
    left: 250px;
    overflow: hidden;
    position: absolute;
    top: 70px;
    width: auto;
}

编辑：http://jsfiddle.net/F6YAK/

Answer 1

如果我正确理解了您的问题，您可以使用

隐藏此文字

overflow: hidden

在父div中

或者您可以使用以下方式添加滚动条：

overflow: scroll

父div中的

Answer 2

您应该使用以下内容定位pre元素：

width: calc(100% - 250px);
height: calc(100% - 70px);

但它没有考虑默认边距。您也可以使用box-sizing: border-box。

这就是你需要的吗？

Answer 3

我可以建议2个解决方案

解决方案1 

通过将<pre>添加到overflow:auto;并给它一个高度使.code元素不会溢出父div（window）

，使overflow:auto;元素可滚动

<强> FIDDLE

解决方案2

将.window添加到{{1}}

，使整个窗口可滚动

<强> FIDDLE

绝对定位元素填充其余高度

3 个答案: