Как сделать так, чтобы на фоне DIV появлялась прокрутка десептида по вертикали - PullRequest
Новая
       1

Как сделать так, чтобы на фоне DIV появлялась прокрутка десептида по вертикали

0 голосов
/ 17 октября 2011

У меня есть два DIV (один сзади и другой на шрифте).Где фон Div показывает Карты Google, и он точно заполняет экран (ширина = 100% и высота = 100%).Но на переднем плане DIV, его высота намного больше.

Как разрешить вертикальную прокрутку для переднего плана DIV с сохранением на карте Google своего местоположения, несмотря на вертикальную прокрутку?

образец того, что я хочу

как вы видите.изображение на заднем плане фиксируется несмотря на вертикальную прокрутку

Ответы [ 4 ]

1 голос
/ 17 октября 2011

Использовать фиксированное позиционирование

пример

http://jsfiddle.net/aysXW/4/

HTML: 

<div id="fg">
this is the foreground
</div>

<div id="bg">
123 ... this is the background
</div>

CSS: 

div#fg{
    position: absolute;
    top: 0px;
    z-index: 1;
    height: 1000px;
    left: 25%;
    width: 50%;
    color: white;
    border: green 5px solid;
}

div#bg{
position: fixed;
top: 0px;
left: 0px;
z-index: 0;
width: 100%;
height: 100%;
background: url('http://img2.socwall.com/Nature/General/200717041506-1877.jpg') no-repeat blue;
}

Надеюсь, это поможет

Вам не нужно определять высоту в пикселях или ширину, я просто использовал ее в качестве примера.

0 голосов
/ 17 октября 2011

Просто оберните карту в фиксированный контейнер. 

<head>
  <style type="text/css">
    #map-wrapper,#maps{ width:100%; height:100%; }
    #map-wrapper{ position:fixed; }
    #article{
      position:absolute; width:50%; height:200%; 
      margin:0 0 20px -25%;
      background:#000 url(http://placekitten.com/1500/1000) center center no-repeat;
      text-align:center; overflow:hidden;
    }
  </style>
</head>
<body>
  <div id="map-wrapper">
    <div id="maps"></div>
  </div>
  <div id="article"></div>
</body>

Протестировано в последних версиях Chrome, FF, Opera и Safari на Mac OSX.

Нашел ответ здесь: http://groups.google.com/group/google-maps-api/browse_thread/thread/33a3ed4d8cb6ba04?pli=1

Однако проблема увеличения и уменьшения масштаба карты при наведении курсора на пользователя по-прежнему сохраняется.

Удачи! :)

0 голосов
/ 17 октября 2011

Надеюсь, что следующее css может вам помочь: 

body { 
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

Ссылка

0 голосов
/ 17 октября 2011

Вы просто сможете добавить background-attachment:scroll к <div>, на котором есть фоновое изображение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...