CSS - контент с минимальной высотой 100% создает вертикальную полосу прокрутки - PullRequest
Новая
       17

CSS - контент с минимальной высотой 100% создает вертикальную полосу прокрутки

4 голосов
/ 14 января 2012

Я пытаюсь создать страницу с заголовком с меню навигации и областью содержимого, которая заполняет остальную часть страницы, содержимое имеет минимальную высоту 100%, но даже если оно пустое, оно показывает вертикальную полосу прокрутки, потому что размера заголовка.

HTML релевантная часть: 

<body>
  <div id="header">Davi Andrade</div>
  <nav>
    <ul>
      <li><a href="/">About</a></li>
      <li><a href="/">Portfolio</a></li>
      <li><a href="/">Downloads</a></li>
      <li><a href="index.html">Home</a></li>
    </ul>
  </nav>
  <div id="content">
    Text
  </div>
</body>

И CSS: 

html, body {
  background: #333333;
  font-family: "Segoe UI", "Lucida Grande", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#header {
  color: #b6b6b6;
  float: left;
  font-family: Megrim;
  font-size: 36px;
  margin: 18px 52px 18px 52px;
  text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

nav li a {
  color: white;
  display: block;
  float: right;
  font-size: 1.3em;
  list-style: none;
  padding: 24px 48px 24px 0;
  text-decoration: none;
}

#content {
  clear: both;
  background: #3e3e3e;
  box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
  min-height: 100%;
}

Есть ли способ это исправить?

Ответы [ 4 ]

4 голосов
/ 16 января 2012

В зависимости от того, что вы пытаетесь достичь, этот макет может быть достигнут одним из двух способов.

Во-первых, если вам ничего не нужно внизу страницы, вам нужно просто удалить min-height и background-color выключите #content и поместите background-color в body.Я также немного изменил бы структуру HTML заголовка, чтобы сделать ее немного более семантически правильной и удобной для работы:

HTML 

<div id="header">
    <h1>Davi Andrade</h1>
    <nav>
        <ul>
            <li><a href="/">About</a></li>
            <li><a href="/">Portfolio</a></li>
            <li><a href="/">Downloads</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </nav>
</div>
<div id="content">
    ....
</div>

CSS 

/* change original #header to h1 and add the following CSS */
#header {
    background: #333333;
    overflow: hidden;
}

/* remove back ground color from #content and add here */
html, body {
    ....
    background-color: #3e3e3e;
    ....
}

Во-вторых, если вам нужен нижний колонтитул внизу страницы, вам нужно будет внести изменения, указанные выше, а затем обернуть свой HTML-код внутри элемента контейнера с помощью min-height: 100%.Затем вы можете использовать position: absolute для размещения элемента нижнего колонтитула в нижней части элемента контейнера.Есть несколько других частей, которые я объяснил более подробно в этом ответе Stackoverflow .

С нижним колонтитулом: http://jsfiddle.net/cNfWZ/1/

Без нижнего колонтитула: http://jsfiddle.net/cNfWZ/

0 голосов
/ 14 января 2012

Посмотрите здесь:

Заставьте div заполнить высоту оставшегося пространства экрана

Это на самом деле не все возможно при использовании обычного CSS и HTML.

Если все, что вам нужно, это чтобы фон был более светло-серым, я бы посоветовал вам сделать фон тела таким же цветом, а затем сделать заголовок и навигацию темно-серыми.Контент будет выглядеть так, как будто он заполняет все остальное, но на самом деле не будет.

Редактировать:

Извините, я должен сказать, что невозможно использовать div и элемент body.С помощью стола вы можете достичь чего-то похожего на то, что вы собираетесь.

0 голосов
/ 14 января 2012

Стив Сандерсон отлично справляется с проблемами CSS высоты: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

0 голосов
/ 14 января 2012

Да. Потерять свойство минимальной высоты.

...