Высота веб-сайта> 100%

Question

Я только что начал свой сайт вчера, опробовав разные вещи, поэтому я могу применить их позже, когда я действительно начну создавать сайты для компаний и т. Д. В любом случае мне было интересно, что не так с моим кодом. Я хочу, чтобы мой сайт был на 100% выше. Сначала я разобрался, но когда я применил прозрачное фоновое изображение для контента div, высота сайта не была на 100% больше. (Вам нужно прокрутить, чтобы перейти к нижней части страницы). Может ли кто-нибудь помочь мне решить эту проблему? Ваша помощь приветствуется! (Я уже посмотрел тонны ранее заданные вопросы, но они не имеют ответа я ищу.)

html { 
      background: url('http://i.imgur.com/dbg9grg.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      height: 100%; 
     } 

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#Header { 
    width: 100%; 
    height: 75px; 
    background-color: rgba(0, 0, 0, 1); 

} 

#logo { 
    Width: 25%; 
    height: 75px; 
    float: left; 
} 

#content { 
    width: 100%; 
    height: 100%; 
    background-image: url('http://i.imgur.com/rm9FZh0.gif'); 
    background-repeat: repeat; 
    margin: auto; 
    min-height: 100%; 
} 

#song { 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     margin: 20px; 
} 

И в HTML: (Если требуется)

<div id="Header"> 
    <div id="logo"> 
    <img src="images/logo.png" href="index.html" /> 
    </div> <!-- close logo --> 
</div> <!-- close Header --> 

<div id="content"> 
<div id="nav"> 
    <ul> 
    <li><a href="visit.html">Visit Tromsø</a></li> 
    <li><a href="about.html">About Us</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
</div> <!-- close nav --> 
<div id="song"> 

<audio autoplay="autoplay" controls="controls"> 
    <source src="music.ogg" /> 
    <source src="music.mp3" /> 
</audio> 

</div> <!-- close song --> 
</div> <!-- close content --> 

CSS-я вставил там не все, но я почти уверен, что «nav» не влияет на высоту страницы. Заранее спасибо!

Answer 1

Это потому, что ваш дочерний элемент больше, чем body.

Ваш #content имеет height: 100%, но не только это не в вашей body единственный div, но он также имеет полей и отступов.

Если вы установили height: 100% дочернего элемента, высота будет равна высоте его родительского элемента (перед применением полей и прокладок). Таким образом, #content по крайней мере такой же высокий, как и тело, и поэтому вся ваша страница выше.

Вам необходимо исправить это соответственно.

Answer 2

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background: url('http://i.imgur.com/dbg9grg.jpg') no-repeat center center fixed; 
    position:fixed; 
} 

Answer 3

Вы должны удалить высоту и минимальную высоту из содержимого.

Так что вам нужно только:

#content { 
    width: 100%; 
    background-image: url('http://i.imgur.com/rm9FZh0.gif'); 
    background-repeat: repeat; 
    margin: auto; 
} 

Answer 4

Вы дали высоту: 100% к вашему HTML, это хорошо, но тогда вы дали высота 100% к содержимому DIV Теперь

total height = (Content div height(100%) + other content height) 
total height > height of html. 

Это у тебя есть скроллер.

Answer 5

Ваш контент настроен на полную высоту, поэтому он сбрасывается заголовком 75px. Если ваша поддержка браузер позволяет использовать calc (http://caniuse.com/#feat=calc), вы можете изменить свой #content CSS, как это:

#content { 
    width: 100%; 
    background-image: url('http://i.imgur.com/rm9FZh0.gif'); 
    background-repeat: repeat; 
    margin: auto; 
    min-height: 95%; // fallback for unsupported browsers - use an approximation. 
    min-height: calc(100%-75px); 
} 

Я удалил height избыточным, но если вам это нужно, вы можете использовать calc с этим так же.