1

我有一个可以根据内容调整大小的页面。我需要的是一种让侧边栏随身体增加/减少的方式，但绝不会低于可见身体的 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>
4

2 回答 2

0

这是一种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>
于 2009-11-17T10:13:27.837 回答
0

我相信您正在寻找的是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（只是将 jQuery 选择替换为 vanilla JavaScript）。

我在 CSS 上添加了注释，以尽我所能解释一切的目的。请不要犹豫，要求澄清！

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

于 2017-03-04T23:25:19.047 回答