Можно ли реализовать этот сценарий автоматического растяжения undex XHTML / CSS? - PullRequest
Новая
       11

Можно ли реализовать этот сценарий автоматического растяжения undex XHTML / CSS?

1 голос
/ 11 июня 2010

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

Чтобы проиллюстрировать с помощью ASCII art:

+----------------------------------------------------+
| This area resizes vertically depending on contents |
+----------------------------------------------------+
| This area stretches to the bottom of the window,   |
| but can be even larger if necessary. Note: this    |
| should be a separate area because it will contain  |
| children with height:100% as well.                 |
|                                                    |
+----------------------------------------------------+

Можно ли это сделать? Можно ли это сделать с помощью Javascript?

Добавлено: Чтобы представить вещи в перспективе и избежать путаницы, подумайте об этом следующим образом:верхнее меню создается мной, но нижняя область - это IFrame, который я хочу заполнить до конца страницы. Это то, к чему оно в конечном итоге сводится в любом случае в моем случае.

Ответы [ 3 ]

1 голос
/ 11 июня 2010

Я бы не использовал iframes, потому что они устарели. Вместо этого вы можете использовать jQuery UI или / и немного CSS.

ASP.NET

Вы можете использовать «Просмотрщик PDF».

Не могли бы вы использовать WPF для веб ...

В противном случае ...

jQuery UI

Вот ссылка на функциональность, которая может вас заинтересовать: http://jqueryui.com/demos/tabs/#default

CSS весело!

Вот пример того, что вы можете сделать с некоторыми CSS.

style.css 

.menuTop
{
   position: relative;
   margin: 0 auto;
   background: #F00;
   height: 30px;
   width: 1024px;
   height: auto;
   text-align: center;

}

.frame
{
   position: relative;
   background:#F90;
   text-align: center;
   width: 1024px;
   height: 720px;
   overflow: scroll;
   margin: 0 auto;
}



.frameContent
{
 position: relative;
 height: auto;
 background:#09F;
 text-align: left;
}

.html 

    <!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>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Test</title>
                <link type="text/css" rel="stylesheet" href="style.css" />
            </head>
            <body>
        <div class="menuTop">
           Your menu here...
         </div>
        <div class="frame">

            <div class="frameContent">
                <p>H</p>
                <p>E</p>
                <p>L</p>
                <p>L</p>
                <p>O</p>

                <p>W</p>
                <p>O</p>
                <p>R</p>
                <p>L</p>
                <p>D</p>
                <p>!</p>

                <p>I</p>
                <p>S</p>

                <p>T</p>
                <p>H</p>
                <p>I</p>
                <p>S</p>

                <p>C</p>
                <p>O</p>
                <p>O</p>
                <p>L</p>
                <p>!</p>
            </div>
        </div>

    </body>
</html>
0 голосов
/ 11 июня 2010

Я предлагаю HTML, как это: 

<div id="menu">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
<div id="contents">
    <p>        Look it's a content-paragraph.
    </p>
    <p>
        bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother<br />
        bother bother bother
    </p>
</div>

С помощью CSS вот так: 

#menu {
    border: dashed gray 1px;
}
#menu ul {
    margin: none;
    padding: none;
    text-align: center;
}
#menu li {
    list-style-type: none;
    display: inline;
}


#contents {
    border: solid blue 1px;
}

Если вы увидите его на JSFiddle и измените размер квадранта «Результат» (внизу справа), чтобы текст не помещался, вы увидите, что он позволяет тексту растягиваться вниз, а затем получает свиток.
Разве это не то, что вы хотите?

0 голосов
/ 11 июня 2010

Использовать JavaScript.

Как получить высоту экрана: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

...