Как создать интерфейс, который обертывает область просмотра браузеров?

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

example

Извините, что фото из MSPaint, но это было быстро и грязно.

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

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

источник

2012-01-16 JustinKaz

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

Редактировать 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; 
}

источник

2012-01-16 05:21:33

насчет неограниченной высоты? Я хочу, чтобы высота также свернула браузер. Надеюсь, без вычисления javascript высоты. – JustinKaz

Эй, это было бы то же самое, я думаю, указав ширину в процентах вместо пикселей. #divContainer {height: 100%; width: 100%;} Этого было бы достаточно, но будьте осторожны, что в случае очень высокого разрешения все ваши элементы управления будут либо слишком растянуты, либо слишком мало между ними, Дэмиен. –

100% высота не работает вообще – JustinKaz

Как создать интерфейс, который обертывает область просмотра браузеров?

ответ

Смежные вопросы