如何在html5中设置我的网页高度

Question

我已经用html5、css和js创建了一个简单的网页。

我有页眉、菜单、幻灯片、主要内容和页脚。并且还使用粘性侧条

所有编码后，幻灯片显示在中间的主要内容和主要内容也隐藏起来。

幻灯片，主要内容和页脚的css代码：

#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}

我的页面如下所示：http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png

我有很多文件，如何解决我的问题，有人帮我解决这个问题。

如有任何帮助，我们将不胜感激。提前谢谢。

Answer 1

我想我明白你需要什么了，您使用的大多数div容器都没有宽度和高度等css大小属性，但最重要的是，它们没有适合html布局结构的位置值。

尝试使用position:relative；首先在css上查找页面中最重要的元素。

首先使用以下默认css参数：

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;     
}

然后添加到你的幻灯片css主类这个

*your_slideshow_class_name_here {
position: relative;
}

之后，解决变得更容易