Div不会进入wrapper？
我在使用div时遇到了一点麻烦，我的网站只有一个包装器大小的height: 100%;，这个包装器包含各种div，比如标题、滑块和内容div。唯一的问题是，由于某种神秘的原因，内容div被推出了包装器div。
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}您可以在http://k2stuc.nl/test/上看到现场演示
回答 4
Stack Overflow用户
发布于 2013-03-15 20:38:10
在<body>上设置height: 100%会将其高度设置为视口的100%。
现在，视区与浏览器窗口的inner-height一样高；当您调整浏览器本身的大小时，这种情况会发生变化。
设置为height: 100%的<body>的任何直接子对象都将继承视口的高度。
这是许多“视差”网站做事情的一部分。
Stack Overflow用户
发布于 2013-03-15 20:48:36
我不是100%理解你的问题。但我发现了一个问题，幻灯片背后的导航是因为你的幻灯片，.wrapper .slider-container #slideshow > div设置为position:absolute。
尝试将.slider-container height设置为固定高度。否则，幻灯片将位于内容之上。
Stack Overflow用户
发布于 2013-03-15 20:50:11
你在漂浮着不该漂浮的东西
即.header、.main-content、#slideshow -这些都不需要浮点数- body不应该有height:100%;
给.slide-container一个固定的高度，以像素为单位，而不是百分比。执行上述操作将解决您的问题
https://stackoverflow.com/questions/15432504
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号