Как создать интерфейс, который оборачивает область просмотра браузеров? - PullRequest
0 голосов
/ 16 января 2012

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

example

Извините, что фотография из mspaint, но она была быстрой и грязной.

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

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

1 Ответ

1 голос
/ 16 января 2012

Этот слой представляет собой жидкость / жидкость шириной, смешанная с требованием фиксированной ширины. Вы можете сделать это легко с обычным CSS. Вы можете сделать поле в нижнем правом углу, указав фиксированное положение в CSS. Проверьте это для примера жидкости пример . Подробнее здесь

Редактировать enter image description here Установите высоту элемента контейнера на 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/test-style.css">
</head>

<body>

<div id="dv-Container">

    <div id="dv-header">
        <h2>Header</h2>
    </div>

    <div id="dv-sideBar">
        <h2>Side bar</h2>
    </div>

    <div id="dv-Content">
        <h2>Content</h2>
    </div>

    <div id="dv-Controls">
    </div>
</div>

</body>
</html>

CSS-файл

/* CSS Document */

html{
height:100%;
}

body{
margin:0;
padding:0;
min-height:100%;
height:100%;
}

h2,a{
    margin:0;
    padding:0;
}

#dv-Container{
background-color:#CCFFFF;
width:100%;
height:100%;
margin:0pt;
}

#dv-sideBar{
    float:left;
    width:200px;
    height:100%;
    background-color:#CCCCCC;
}

#dv-Content{
    float:inherit;
    background-color:#FFFFFF;
    width:100%;
    height:100%;
}

#dv-Controls{
    height:150px;
    width:100px;
    background-color:#00CC99;
    position:fixed;
    right:10px;
    bottom:100px;
    margin:0;
    float:right;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...