У меня есть экзотический дизайн, который нуждается в следующем. Левая сторона должна прокручиваться, а правая сторона + верхняя часть должна оставаться на месте (фиксированная). См. Прикрепленное изображение.
Я могу выполнить это по положению: исправлено с верхней и правой стороны. Верхняя и правая стороны остаются на месте, пока левые прокрутки.... , НО ПРОБЛЕМА - это то, что больше нет полосы прокрутки, если кто-то приближается, и вы также не можете прокручивать влево-вправо, чтобы увидеть целую страницу
Как можно атаковать такой макет?
Спасибо.
Не удалось отправить код раньше - позвольте мне попробовать еще раз:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Разъяснение: Мой css отражает 2 вещи в правой части, но дело в том, что правые и верхние должны быть статичными, а левые прокрутки... И они должны быть горизонтально прокручимы, если пользователь увеличивает масштаб изображения.
Кроме того, я пробовал обертывать вещи в контейнере div, но у этого есть свои проблемы - он прокручивается, но никогда не достигает правой стороны, если окно не максимизируется.
Еще раз спасибо.
Чтобы уточнить: в качестве примера, чтобы получить мою точку зрения... измените размер окна stackoverflow на половину горизонтального размера экрана... Теперь посмотрите, как вы можете прокручивать влево-вправо? Если вы увеличиваете масштаб, вы можете прокручивать влево и вправо, чтобы увидеть всю страницу. Ну, в моем макете, который работает в полноэкранном режиме браузера... как только я изменяю размер этой полосы прокрутки внизу, не появляется вообще, оставляя пользователя без возможности прокрутки по горизонтали. См. Рисунок ниже
Скрипки http://jsfiddle.net/moby7000/tWb3e/
