Question

我有一个页面，可以根据内容调整大小。我需要的是侧杆随身体增加/减少的方式，但永远不会低于可见体的100％。

最初页面看起来不错，但是当我增加内容时，我可以看到左侧和右侧下方的空白区域，而不应该有任何内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container
        {
            background-color: Gray;
            height: 100%;
            width: 100%;
            position: absolute;
            clear: both;
        }
        .content
        {
            background-color: white;
            width: 80%;
            margin: 0 auto;
            height: 100%;
            min-height: 100%;
        }
    </style>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script language="javascript" type="text/javascript">
        function MakeBig() {
            var html = "";
            for (var i = 0; i < 500; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);
        }

        function MakeSmall() {
            var html = "";
            for (var i = 0; i < 5; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);

        }
    </script>
</head>
<body>
    <div id="container" class="container">
        <div id="content" class="content">
            This is some text in the content
            <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
            <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
            <div id="textHolder"></div>
        </div>
    </div>
</body>
</html>

Answer 1

这是一种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>

Answer 2

我相信你要搜索的是position: fixed。

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

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

// Sorry for the ".getElementById"'s thing, I didn't have jQuery
function MakeBig() {
    var html = "";
    for (var i = 0; i < 500; i++) {
        html += "this is some random filler text<br/>";
    }
    document.getElementById("textHolder").innerHTML = html;
}

function MakeSmall() {
    var html = "";
    for (var i = 0; i < 5; i++) {
        html += "this is some random filler text<br/>";
    }
    document.getElementById("textHolder").innerHTML = html;
}

body {
    /* <body> has a default margin of 8px, let's remove that */
    margin: 0;
}

.container {
    height: 100%;
    width: 100%;
    position: absolute;
    clear: both;
}

.content {
    background-color: white;
    width: 80%;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;
}

/* Add 2 pseudo-elements inside .container */
.container::before,
.container::after {
    /* no text, only gray background */
    content: "";
    background-color: gray;
    /* fixed positioning -> won't leave the screen after scroll */
    position: fixed;
    /* 10% width -> main content has 80% width, that leaves 10% for each side */
    width: 10%;
    /* 100% height, or 0px from top to 0px from bottom */
    top: 0;
    bottom: 0;
}
.container::before {  left: 0;  }  /* align to left */
.container::after {  right: 0;  }  /* align to right */

<div id="container" class="container">
    <div id="content" class="content">
        This is some text in the content
        <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
        <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
        <div id="textHolder"></div>
    </div>
</div>

您可能已经注意到，我没有更改您的HTML并且几乎没有触及JavaScript（只是用vanilla JavaScript替换jQuery选项）。

我在CSS上添加了评论，尽可能地解释一切的目的是什么。请不要犹豫，要求澄清！

我希望这仍然与你相关，即使在7年之后！干杯！

CSS列大小调整

2 个答案: