Как использовать 100% от текущей высоты окна (ни больше, ни меньше)?

#html #css #scroll #height

#HTML #css #прокрутка #высота

Вопрос:

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

Предполагаемый макет

Другими словами, я не хочу, чтобы пользователь мог прокручивать всю страницу, а скорее разные разделы страницы. Аналогично тому, как работает большинство настольных приложений.

Я прочитал все о том, как создавать столбцы одинаковой высоты и т.д., Но ни одно из найденных мной решений не добавляет прокрутку к различным разделам вместо всей страницы, и по-прежнему использует всю высоту окна.

Я надеюсь, что у кого-нибудь есть решение этой проблемы, это было бы потрясающе. Я часами гуглил.

Ответ №1:

Если вы знакомы с jQuery, пожалуйста, смотритеhttp://layout.jquery-dev.net/demos.cfm .

Там также есть другие плагины, подобные этому.

Ответ №2:

Это должно обеспечить вам 90% пути к этому:

http://jsfiddle.net/aEdc7/

Однако рассматривали ли вы возможность использования фреймворка JavaScript, такого как Ext JS? Взгляните на некоторые демонстрации:http://dev.sencha.com/deploy/ext-4.0.1/examples /

 html, body {
    margin: 0;
    padding: 0
}

#container > div {
    position: absolute
}
#header {
    top: 0;
    width: 100%;
    background: cyan;
    height: 40px
}
#nav {
    top: 40px;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #ccc;
    overflow-y: auto
}
#content {
    top: 60px;
    bottom: 0;
    left: 150px;
    right: 0;
    background: #eee;
    overflow-y: auto
}
#error {
    top: 40px;
    left: 150px;
    right: 0;
    height: 20px;
    background: #444
}

<div id="container">
    <div id="header"></div>
    <div id="nav"><br /></div>
    <div id="error"></div>
    <div id="content"></div>
</div>

1. Этот фрагмент HTML / CSS сработал как нельзя лучше, большое спасибо! Именно то, что мне было нужно. Я еще не рассматривал фреймворк JavaScript, я бы предпочел сохранить его как можно более легким. Вы бы сказали, есть ли какие-либо недостатки в использовании HTML / CSS вместо Ext JS, например?

2. @Christofer Eliasson: Я не знаю точно, что вы делаете, но вы сказали "the feeling of a desktop app" , что мгновенно заставляет меня думать, что вам следует по крайней мере проверить Ext JS, потому что он может делать некоторые очень классные вещи в стиле «рабочего стола»: dev.sencha.com/deploy/ext-4.0.1/examples/layout/complex.html — однако это может быть просто чрезмерным усложнением.

3. Я согласен с вами, это потрясающий пример, и что-то очень близкое к тому, что я искал. Я подробнее рассмотрю Ext JS.

Ответ №3:

В вашем случае может пригодиться CSS-трюк: объявите позицию элемента абсолютной, установите верхнюю позицию равной 0, установите нижнюю позицию равной 0. Высота элемента не должна быть определена или определена как auto .

Чем элемент равен высоте его родительского элемента.

вероятно, это может помочь создать макет, который вы ищете.

пример кода :

 <html>
    <head>
        <style type="text/css">
            .container {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }

            .header {
                height: 40px;
                background: #aabbff;
            }

            .contentLeft {
                position: absolute;
                top: 40px;
                bottom: 20px;
                left: 0;
                width: 40%;
                overflow: auto;
                background: #eeeeff;
            }

            .contentRight {
                position: absolute;
                top: 40px;
                bottom: 20px;
                right: 0;
                width: 60%;
                overflow: auto;
                background: #ddddff;
            }

            .bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                border: 3px solid blue;
                height: 14px;
                background: #9999ff;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="contentLeft"></div>
            <div class="contentRight"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>

Ciao,

Нико