CSS макет с 2 столбцами, занимающий всю ширину браузера, где левый столбец может свернуться - PullRequest
Новая
       5

CSS макет с 2 столбцами, занимающий всю ширину браузера, где левый столбец может свернуться

1 голос
/ 01 апреля 2010

Я хочу иметь макет с двумя столбцами, и чтобы левый столбец сначала мог иметь размер 200 пикселей, а также иметь кнопку «уменьшить», чтобы уменьшить его до 10 пикселей, и развернуть правый столбец, чтобы заполнить все остальные доступного пространства. Затем, если они нажмут на кнопку «показать» (это будет все, что они увидят в теперь левом столбце шириной 10 пикселей), то левое увеличится до 200 пикселей и уменьшит правый столбец на эту величину.

Я не могу понять, как увеличить и уменьшить правую колонку, не зная точной ширины окна.

Я надеюсь, что это имеет смысл, и я действительно надеюсь, что кто-то может направить меня в правильном направлении.

Требования к браузеру: IE8, FF3.6, Safari и Chrome, поэтому теоретически я могу использовать некоторые передовые методы CSS. По крайней мере, мне не нужно поддерживать IE6.

Ответы [ 3 ]

3 голосов
/ 02 апреля 2010

Если вы плаваете в левом столбце (float: left;) с переменной шириной 10 или 200 пикселей и просто добавляете overflow: hidden; к стилям правого столбца, правый столбец расширяется и сжимается, чтобы заполнить пространство, каким бы ни был сайт левой колонки.

1 голос
/ 01 апреля 2010

Примерно так должно получиться: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Demo</title>
        <style type="text/css" media="screen">
            html, body { height:100%;}
            #container { overflow:hidden; height:100%; }
            #sub-content { background:yellow; float:left; height:100%; width:200px; }
            #main-content { background:red; height:100%;}
            #container .shrink { width:10px; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sub-content">
                Sub content
                <a id="toggler" href="#">Toggle</a>
            </div>
            <div id="main-content">
                Main content
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var link = document.getElementById('toggler');
        link.onclick = function() {
            var subContent = document.getElementById('sub-content');
            if (subContent.className == 'shrink') {
                subContent.className = '';
            } else {
                subContent.className = 'shrink';
            }
            return false;
        }
    </script>
</html>
1 голос
/ 01 апреля 2010

будет полезно, если вы поместите свой образец на http://jsbin.com/,, но попробуйте следующее:

HTML, тело, форма {
высота: 100%; поле: 0px; отступы: 0px; } а затем сделайте правильный столбец шириной 100%.

Это то, что вы ищете ?: http://jsbin.com/uweqe3

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...