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

Я пытаюсь создать страницу с заголовком с меню навигации и областью содержимого, которая заполняет остальную часть страницы, содержание имеет 100% мин. -height, но даже когда он пуст, он показывает вертикальную полосу прокрутки из-за размера заголовка.CSS - Содержимое со 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%; 
}

Существует ли способ исправить это?

источник

2012-01-14 Davi

Он выглядит хорошо для меня в Chrome и FF ...Вы имеете в виду, что более светлая серая область ниже имеет свою собственную полосу прокрутки, или вы говорите, что область содержимого слишком велика, создавая нормальную полосу прокрутки? – mcallinder

Взгляните на это http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space –

Слишком большая область содержимого, она должна показывать полосу прокрутки только тогда, когда это необходимо. – Davi

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

Во-первых, если вы ничего не нужно в нижней части страницы, то вы должны просто удалить 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 для размещения элемента нижнего колонтитула в нижней части элемента контейнера. Есть еще несколько бит и кусочков, которые я объяснил более подробно в пределах this Stackoverflow answer.

С сноской: http://jsfiddle.net/cNfWZ/1/

Без сноски: http://jsfiddle.net/cNfWZ/

источник

2012-01-15 20:51:24

Не то, чтобы это имело огромное значение, но вы перепутали свои две ссылки. Хороший ответ, хотя. –

@ Aiyion.Prime - спасибо, я обновил свой ответ –

Да. Потеряйте свойство min-height.

источник

2012-01-14 17:07:34 mihai

Но если я это сделаю, область содержимого не заполнит остальную часть страницы. – Davi

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

Make a div fill the height of the remaining screen space

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

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

Edit:

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

источник

2012-01-14 17:29:23 SimpleTouch

Я хоть об инверсии цветов, но я хотел, чтобы часть контента была анимирована, поэтому она должна была быть тем, у кого была тень. Было бы плохой идеей использовать таблицу? – Davi

@SimpleTouch нет необходимости приносить в нее таблицы. Просто потому, что вы не знаете, как это сделать, используя элементы 'div', это не значит, что это невозможно. –

Совсем нет. Таблицы, как правило, смотрят вниз на причину плохой истории злоупотребления и больше HTML-разметки, чем обычно требуется для заданной задачи, но если они выполняют эту работу, то ничего другого не может без хаков, я не вижу причин не делать этого. – SimpleTouch

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

источник

2012-01-14 17:29:27 fordareh

Интересно, но я не вижу, как это может помочь в моем случае. – Davi

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

ответ

Смежные вопросы