javascript - HTML 5 div 高度 :100% is not working

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 中)

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

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

的全屏

尽管在您的网站上测试了这一点，因为您有许多层出现的元素没有反射(reflect)在 JSFiddle 中，这可能会干扰此代码。

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

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

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