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%已div，但它不仅是body中唯一的height: 100%，而且还有边距和填充。

当您设置子元素的#content时，它的高度将等于其父级的高度（在应用边距和填充之前）。因此{{1}}至少与身体一样高，因此整页都高于此。

你需要相应地解决这个问题。

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

你已经给你的html高度：100％了，没关系，但是你给了你的内容div高度100％现在

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。

网站高度＆gt; 100％

5 个答案: