заголовок + боковая панель (половина страницы / полная высота) + карта Google (половина страницы / полная высота)

0

Я пытаюсь создать шаблон с помощью

header + sidebar (половина страницы/полная высота) + карта google (половина страницы/полная высота)

В jsfiddle трудно увидеть детали, но дает мне полосу прокрутки в стороне браузера, которую я не хочу. Кроме того, боковая панель на 40 пикселей выше (высота заголовка), чем предполагаемая. И карта google не достигает дна. Таким образом, хотя он имеет высоту 100%, он короче.

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

http://jsfiddle.net/sebababi/TW4uQ/1/

  html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    max-height:100%;
  }
  #map-canvas {
    height: 90%;
    margin: 0px;
    padding: 0px
    float:left;
  }
  #sidebar{
  background-color:grey;
  width:50%;
  height:100%;
  float:left;
  }
  #header{
  background-color:green;
  width:100%;
  height:40px;
  }

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="map-canvas"></div>

Есть идеи?

  • 0
    Разве вам не нужен какой-то уровень прокрутки для случаев, когда содержимое превышает высоту области просмотра?
Теги:
google-maps

2 ответа

1
Лучший ответ
    <div id="page">
    <div id="header">
    <div id="nav">nav</div>
    </div><!-- header -->
    <div id="main">
    <div id="sidebar">sb</div>
    <div id="map">map</div>
    </div><!-- main -->
    </div><!-- page -->

  html, body {
   height:100%;
   width:100%;
   padding:0;
   margin:0;
}
#page {
  display:table;
  border-spacing:0;
  width:100%;
  height:100%;
}
#header {
  display:table-row;
}
#main {
  display:table-row;
  position:relative;
}
#nav {
  background:green;
  width:100%;
  position:absolute;
  left:0;
  right:0;
  height:40px;
}
#sidebar, #map-canvas {
  display:table-cell;
  width:50%;
  bottom:0;
  position:absolute;   
  top:40px;
}
#sidebar {
  background:blue;
   left:0;

}
#map-canvas {
    overflow:hidden;
    right:0;
}

http://jsfiddle.net/XB5Lp/1/

Поделиться
  • 0
    офс Каковы правила размещения кода на SO снова?
  • 0
    Спасибо, это сработало отлично. Я не знал, что вы могли бы использовать display: table.
Показать ещё 18 комментариев
0

Попытайтесь использовать какую-то оболочку? боковая панель больше, чем 100%, а холст - 90%.

При использовании обертки попробуйте overflow: hidden

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню