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

全屏

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

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

编辑2 我认为最好的方法是调整每个按钮点击div（向下箭头）。因为我无法看到这些触发器，但我无法提供太多帮助。也许试试看这个Jquery Change Height based on Browser Size/Resize？

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

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

1 个答案: