Question

我在使用html和css时遇到了一些问题。我希望100％DIV在彼此之下，但我做的每件事都不起作用。它几乎可以工作但不是每次移动潜水。它正在我的桌面上工作但是当我在手机上打开它时它无法正常工作。有人可以帮助我吗？

＆＃13;

window.onload = onLoad;

function onLoad()
{
	var teller = 0;
	//ONLOAD
	$('span').fadeIn(4000);
	$('html,body').animate({
			scrollTop: $('html').offset().top
	}, 1700);
	
	//MENU	
	$('#menu').on('click', function (e) 
	{
		$("#menuBar").animate({width:'toggle'},350);
		$("#menu").toggleClass('rotated');
	});
	//BUTTON_ONClICK
	//BUTTON_1
	$('#screen-1-go').on('click', function (e) 
	{
		e.preventDefault();
		$('html,body').animate({
			scrollTop: $('#screen-2').offset().top
		}, 1700);
    });
	
	//TO_SCREEN_3
	$('.more').on('click', function (e) 
	{
		teller=0;
		e.preventDefault();
		$('html,body').animate({
			scrollTop: $('#screen-3').offset().top
		}, 1700);
    });
	//TO_THE_TOP
	$('.top').on('click', function (e) 
	{
		teller=0;
		e.preventDefault();
		$('html,body').animate({
			scrollTop: $('html').offset().top
		}, 1700);
    });
	
	
	//VARS_SCROLL_EVENT
	var screens = ["html", "#screen-2", "#screen-3"];
	$('html').on('wheel', function(event) 
	{
		if (event.originalEvent.deltaY > 0) 
		{
			teller++;
			animateToDiv(screens[teller]);
		} 
		else 
		{
			teller--;
			animateToDiv(screens[teller]);
		}
	});
}

function animateToDiv(div)
{
	$('html,body').animate({
		scrollTop: $(div).offset().top
	}, 1700);
}

＆＃13;

html
 {
    height: 100%;
    margin: 0;
    padding: 0;
}

body 
{
	margin: 0;
	background: #000; 
	overflow-x: hidden;
	overflow-y: hidden;
}

/* Menu */
#menu
{
	position: fixed;
	right: 10px;
	z-index: 9999;
	cursor: pointery
}

#menu > img
{
	width: 60px;
	height: 60px;
}

#menuBar
{
	position: fixed;
	right: 0px;
	float: right;
	height: 100%;
	width: 100%;
	background-color: black;
	box-shadow: -1px 0px 1px 1px black;
	display: none;
	z-index: 9998;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}

.rotated 
{ 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* Screen_1 */

#screen-1 
{ 
	position: fixed;
	font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
	background: url(../Uploads/Video/screen1-video.gif) repeat;
	background-size: cover;
	color: white;
	font-size: 1.2rem;
	width: 100%;
	height: 100%;
}

#screen-1-tekst
{
	margin-left: auto;
    margin-right: auto;
	margin-top: 16em;
	width: 30em;
}

#screen-1-tekst > span
{
	font-family: 'Brush Script MT', cursive;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	color: #DBBC90;
	font-size: 6em;
	display: none;
}

#screen-1-go
{
	margin-top: 16%;
}

.button
{
	display: block;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.75);
    color: rgba(255,255,255,0.75);
    height: 45px;
    line-height: 48px;
    cursor: pointer;
    -webkit-transition: color 0.5s ease,border-color 0.5s ease;
    transition: color 0.5s ease,border-color 0.5s ease;
	margin-left: auto;
    margin-right: auto;
    width: 13em;
	margin: auto;
	position: absolute;
	left: 0; bottom: 10%; right: 0;
}

/* Screen2 */

#screen-2
{
	position: absolute;
	margin-top: 100%;
	width: 100%;
	height: 100%;
	background-color: #d55a49;
}

#screen-2-tekst > h1 
{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
	color: rgba(99, 35, 35, 0.8);
    text-shadow: 1px 4px 6px #D55A49, 0 0 0 #000, 2px 4px 6px #D55A49;
	font-size: 5em;
	text-align: center;
}

#screen-2-tekst
{
	margin-left: auto;
    margin-right: auto;
	margin-top: 4em;
	width: 27em;
}

::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }

/* Screen2 */

#screen-3
{
	position: absolute;
	margin-top: 150.5%;
	width: 100%;
	height: 100%;
	background-color: #80a5ba;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="Files/CSS/home.css">
		<script src="Files/JS/background.js"></script>
		<script src="Files/JS/JQBA.js"></script>
		<script src="Files/JS/jquery-1.12.0.min.js"></script>
	</head>
	<body>
		<div id="menu">
			<img src="Files/Uploads/Image/hamburger.png">
		</div>
		<div id="menuBar">
		</div>
		
		<div id="screen-1">
			<div id="screen-1-tekst">
				<span>Joost de Niet</span>
			</div>
			<div id="screen-1-go">
				<h1 class="button">More about me</h1>
			</div>
		</div>
		
		<div id="screen-2">
			<div id="screen-2-tekst">
				<h1>Portfolio</h1>
			</div>
			<div id="screen-button">
				<h1 class="button more">More..</h1>
			</div>
		</div>
		
		<div id="screen-3">
			<div id="screen-button">
				<h1 class="button top">To the top</h1>
			</div>
		</div>
	</body>
</html>

＆＃13;

Answer 1

你应该尝试使用身高：100vh用于移动设备

Answer 2

您可以使用vh。 Read more here

所以它会像

div {
    height: 100vh /*100% of device height*/
}

希望这会有所帮助：）

Answer 3

this.unset()

是响应式设计的解决方案之一或者你应该使用mediaquery

HTML，CSS - 每台设备无法正常工作时的100％div高度

3 个答案: