HTML 5 div 高度：100% 不起作用

Question

我的 div 高度部分有问题。我试图将 div 高度设置为 100%，但它不起作用。如果我没有使用 html 5，我的代码可以正常工作。 This is the link 我在其中包含了带有以下错误的实时网站。

这是我的 style.css 代码：

.slide {
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 30px;
}

#slide1 {
  background-color: #00B4FF;

}

#slide2 {
  background-color: #000000;
}

#slide3 {
  background-color: #00B4FF;
  height: 700px;
}

#slide4 {
  background-color: yellow;
  width: 100%;
  height: 100%;
}

#slide5 {
  background-color: #f8f8f8;
}

#slide6 {
  background-color: orange;
  height: 350px;
}

#slide7 {
  background-color: #f8f8f8;
}

我尝试在每个#slide id 中手动将高度更改为 100%，但仍然无法正常工作。

Answer 1

试试这样的东西

#slide1{
     height: 100%;
     width: 100%;
     position: relative;
     background-color: #00B4FF;
}

JSFiddle Demo（每张幻灯片的 CSS 中都有它）

ALSO 删除您在 .slide 中的样式 CSS，这会干扰您的 #slide 样式。

在初始加载时，每个高度都应该是相对于每个#slide 的全屏

在您的网站上对此进行测试，因为您有许多未反映在 JSFiddle 中的项目层发生，这可能会干扰此代码。

编辑刚刚为您修复了大约 20 行不正确的 HTML，继续添加更新。

编辑 2 我认为最好的方法是每次单击按钮（向下箭头）调整 div 的大小。由于我看不到这些触发器，但是我帮不上什么忙。也许尝试调查这个Jquery Change Height based on Browser Size/Resize？

在不知道浏览器将如何的情况下预先设置每个 div 的所有可能高度是不太可能的。使用上面发布的 JQuery 将使您的网站更加动态/流畅。