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

我在

中有

元素。此

绝对定位，宽度和高度设置为100%。有时

元素的高度大于主

，所以它会跳出页面。

<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;
}

overflow: hidden

如何设置此

元素，使其填充其余高度而不跳出页面

overflow: scroll

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

…一些大的代码
CSS
.窗户{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
显示：内联块；
}
.代码{
左：250px；
溢出：隐藏；
位置：绝对位置；
顶部：70像素；
宽度：自动；
}

---

编辑：

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

在父分区中，或者您可以使用以下命令添加滚动条：

---

在父div中，您应该使用如下内容定位

pre

元素：

不过，它没有考虑到违约保证金。 您还可以使用

框大小：边框框

---

这就是你需要的吗？

我可以建议两种解决方案

解决方案1

通过添加

溢出：自动，使
元素可滚动

到

.code

并给它一个高度，这样它就不会溢出父div（

窗口

）

解决方案2

通过添加

overflow:auto使整个窗口可滚动到
窗口

单靠CSS是无法做到这一点的。你需要使用一些JavaScript来计算大小。你能放下你想要的图片吗？我希望扩展.window以覆盖pre-tag中的所有代码，或者将pre-tag设置为占据剩余的高度，如果它试图跳出页面，则添加滚动条。如果我将pre-tag的高度设置为100%，它的高度也大于页面本身的高度，我会用fiddle更新我的问题，以便您理解我的意思，您可以在
pre
元素上使用，
底部：0
和
右侧：0
。这是我需要的，我以前尝试过，但由于Opera中不支持calc（对IE不太确定）我不喜欢使用calcSolution 1，因为。代码应该具有可变高度，解决方案2与我解决此问题所做的最接近。