Javascript CSS列大小

我有一个可以根据内容调整大小的页面。我需要的是一种方法，使侧栏随着身体的增加/减少，但决不能小于可见身体的100%

最初页面看起来不错，但当我增加内容时，我可以看到左右两侧下方的空白，而此时应该没有空白

容器 { 背景颜色：灰色； 身高：100%； 宽度：100%； 位置：绝对位置； 明确：两者皆有； } 所容纳之物 { 背景色：白色； 宽度：80%； 保证金：0自动； 身高：100%； 最小高度：100%； } 函数变大{ var html=； 对于变量i=0；i<500；i++{ html+=这是一些随机填充文本； } $textHolder.htmlhtml； } 函数变小{ var html=； 对于变量i=0；i<5；i++{ html+=这是一些随机填充文本； } $textHolder.htmlhtml； } 这是内容中的一些文本 增加内容 减少内容

---

这里有一个jQuery方法。但是，不是防弹的。希望你能有一些想法

<style type="text/css">
    html { height: 100% }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        if(!($(window).height() < $(document).height())) {
            $("#wrapper").css("height", "100%");
            $("#sidebar").css("height", "100%");
        }
        $("#content").resize(function() {
            if($("#content").height() > $(window).height())
                $("#sidebar").height($("#content").height());
        });
    });
</script>

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

---

我相信你要找的是

它基本上不允许滚动从屏幕上删除元素。也就是说，您可以随意滚动，但固定元素不会移动

下面是您的示例页面的实际操作：

//抱歉.getElementById的问题，我没有jQuery 函数变大{ var html=； 对于变量i=0；i<500；i++{ html+=这是一些随机填充文本； } document.getElementByIdtextHolder.innerHTML=html； } 函数变小{ var html=； 对于变量i=0；i<5；i++{ html+=这是一些随机填充文本； } document.getElementByIdtextHolder.innerHTML=html； } 身体{ /*有一个默认的8px的余量，让我们去掉它*/ 保证金：0； } .集装箱{ 身高：100%； 宽度：100%； 位置：绝对位置； 明确：两者皆有； } .内容{ 背景色：白色； 宽度：80%； 保证金：0自动； 身高：100%； 最小高度：100%； } /*在.container中添加2个伪元素*/ .容器：：之前， .容器：：之后{ /*没有文本，只有灰色背景*/ 内容：； 背景颜色：灰色； /*固定定位->滚动后不会离开屏幕*/ 位置：固定； /*10%宽度->主要内容有80%宽度，即每边留出10%*/ 宽度：10%； /*100%高度，或从顶部到底部为0px*/ 排名：0； 底部：0； } .container:：在{left:0；}/*之前向左对齐*/ .container:：在{right:0；}/*之后向右对齐*/ 这是内容中的一些文本 增加内容 减少内容

---

我曾经尝试过类似的方法，但是当我把内容缩小时，我遇到了一个问题，我无法检查像素值是否小于窗口的100%。b、 上面的代码不起作用，但这是个好主意。