Как я могу настроить стиль CSS о фиксировании высоты? - PullRequest
Новая
       43

Как я могу настроить стиль CSS о фиксировании высоты?

0 голосов
/ 15 сентября 2011

У меня есть некоторые проблемы с компоновкой CSS.

Я написал код, как показано ниже: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<style>
html { height:100%; margin: 0px; padding: 0px; }
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: Verdana, helvetica, arial, sans-serif;
  font-size: 68.75%;
  background: #fff;
  color: #333;
}  
#header {
  position: absolute;
  width:100%;
  background: #c0c0c0;
  height: 100px;
}
#wrapper {
  height: 100%;
  width: 100%;
}
#content {
  position: relative;
  margin-left: 370px;
  background: #ffdab9;
  height: 100%;
}
#sidebar {
  position: absolute;
  background: #eee8aa;
  width: 370px;
  height: 100%;
}
</style>
<body>
<div id="header">header</div>
<div id="wrapper">
  <div id="sidebar">sidebar</div>
  <div id="content">content</div>
</div>
</body>
</html>

то, что я хочу сделать, это

  1. Высота "заголовка" составляет 100 пикселей.
  2. "боковая панель (левая сторона)" 370 пикселей.
  3. "content (right side)" относительна.
  4. Когда я контролирую браузер меньшего размера, я не хочу, чтобы браузер делал "полосу прокрутки".
    как http://maps.google.com. Google Maps никогда не делают полосу прокрутки при любом изменении размера браузера.

номер 4 - самое важное, что я сказал.

Если цель достигнута, мой код можно исправить все. Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 15 сентября 2011

Я думаю, что вам нужно два изменения CSS (см. Также jsfiddle ):

добавьте overflow: hidden к body

body {
    ...
    overflow: hidden;
}

изменить positionдо relative в #header: 

#header {
    position: relative;
    ...
}

=== ОБНОВЛЕНИЕ ===

Есть (как минимум) три возможных решения, но ни одно не идеально:

1.) Ваш пример сайта от Google вычисляет высоту (контента) в начале и после каждого изменения размера с помощью javascript.
Отрицательный: не только css, вам нужен скрипт.

2.) Добавитьвысота заголовка (здесь 100px) до определения css bottom всех элементов на боковой панели и содержимого (см. demo2 ).
Отрицательно: если высота заголовка изменяется, необходимо обновить все днищеопределения также. 

#words { 
    bottom: 102px; 
    ...
}

3.) Используйте функцию css calc для #wrapper для вычисления реальной высоты (см. demo3 ).
Отрицательный: на данный момент он работает только с firefox4 (и выше) и IE9 . 

#wrapper {
    ...
    height: calc(100% - 100px);
    height: -moz-calc(100% - 100px);
}
...