-1

我昨天刚开始我的网站，尝试了不同的东西，以便以后当我真正开始为公司等制作网站时应用它们。无论如何，我想知道我的代码有什么问题。我希望我的网站高度达到 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 不是全部，但我几乎可以肯定“导航”不会影响页面的高度。提前致谢！

4

5 回答 5

0

那是因为您的子元素大于body.

你#content有height: 100%，但它不仅不是div你唯一的，body而且还有边距和填充。

当您设置height: 100%子元素时，它的高度将等于其父元素的高度（在应用边距和填充之前）。所以#content至少和身体一样高，因此你的整个页面都比身体高。

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

于 2013-05-03T11:48:39.720 回答
0 
body {
    margin: 0;
    padding: 0;
    height: 100%;   
    background: url('http://i.imgur.com/dbg9grg.jpg') no-repeat center center fixed;
    position:fixed;
}
于 2013-05-03T11:48:59.790 回答
0

您必须从内容中删除高度和最小高度。

所以你只需要：

#content {
    width: 100%;
    background-image: url('http://i.imgur.com/rm9FZh0.gif');
    background-repeat: repeat;
    margin: auto;
}
于 2013-05-03T11:50:27.400 回答
0

你已经给你的html高度：100％，这很好，但是你现在给你的内容div高度100％

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

那就是你有一个卷轴。

于 2013-05-03T12:02:24.500 回答
0

您的内容设置为全高，因此它被 75px 标题向下推。如果您的浏览器支持允许您使用calc( http://caniuse.com/#feat=calc )，您可以像这样修改您的#contentCSS：

#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以同样的方式使用它。

于 2013-05-03T12:03:14.053 回答