gpt4 book ai didi

html - 创建全屏 div

转载 作者:可可西里 更新时间:2023-11-01 13:14:36 25 4
gpt4 key购买 nike

您好,我正在尝试创建一个具有浏览器全高的嵌套 div。

我正在使用 swipe.js,以便能够在三个全屏 div 之间滑动。如果我定义“介绍”div 的高度,我可以让它工作,但因为我希望它在不同的屏幕尺寸之间工作,所以我希望用最小高度等来做到这一点。

html {
/* height: 100%; */
}

body {
/* height: 100%; */
}

#wrapper {
margin: 0 auto;
min-width: 320px;
max-width: 1200px;
/* min-height: 100%; */
/* height: auto !important; */
/* height: 100%; */
}

.swipe div {
margin:0 0px;
padding:0px 0px;
}

#intro {
min-height: 100%;
height: auto !important;
height: 100%;

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

和 html:

<body>

<div id="wrapper">

<div id='slider' class='swipe'>

<div>
<div id="intro" style='display:block; background: url(images/background.jpg) no-repeat center center fixed;'>
</div>

<div id="intro2" style='display:none'>2</div>

<div id="intro3" style='display:none'>3</div>

</div>

</div><!-- #slider -->

</div><!-- #wrapper -->

<script src='swipe.js'></script>
<script>var slider = new Swipe(document.getElementById('slider'));
</script>
</body>

如有任何帮助或建议,我们将不胜感激

最佳答案

看看这是否是您想要实现的目标:

body {
height: 100%;
width:100%;
}

#wrapper {
position:absolute;
margin: 0 auto;
min-width: 320px;
max-width: 1200px;
/* min-height: 100%; */
/* height: auto !important; */
height: 100%;
width:100%;
}

.swipe{
position:relative;
height:100%;
width:100%;
margin:0 0px;
padding:0px 0px;
background-color:red;
}

#intro {
}

jsfiddle

关于html - 创建全屏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12701090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com