CSS размер колонки - PullRequest
Новая
       17

CSS размер колонки

1 голос
/ 17 ноября 2009

У меня есть страница, размер которой можно изменить в зависимости от содержимого. Мне нужен способ увеличения / уменьшения боковых панелей вместе с телом, но не менее 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>

Ответы [ 2 ]

0 голосов
/ 05 марта 2017

Я считаю, что вы ищете 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 на ванильный JavaScript).

Я добавил комментарии к CSS, чтобы как можно лучше объяснить, что было целью всего. Пожалуйста, не стесняйтесь просить разъяснений!

Надеюсь, это все еще актуально для вас, даже после 7 лет! Ура!

0 голосов
/ 17 ноября 2009

Вот способ 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>
...