Jump to content
  • 0

Div за пределами нижней части экрана

lnva

Asked by lnva,

 Share

Question

lnva Explorer

lnva

Posted
Posted (edited)

Здравствуйте! Помогите правильно разместить блоки в обертке.

Имеется два основных блока, один из которых будет являться фоном ("landscape"), а другой содержать навигационные элементы ("menu"). Меню должно прокручиваться на фоне статичного фона, а у меня "menu" сваливается ниже обертки (height:100%), за пределы экрана. Кучу вариантов перебрал с позиционированием и размерами, но найти правильное решение никак не могу...

CodePen , или:

.

CSS

Скрытый текст 

* {box-sizing: border-box;}

*:before, *:after {
	content: '';
	display: block;
	position: absolute;
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #593c1e;

}
.wrapper {
	width: 100%;
	height: 100%;
}

/*
=================================
					LANDSCAPE STYLE
=================================
*/

.landscape {
	position: relative;
	height: 100%;
	background: #db9;
	overflow: hidden;
}

.landscape div {position: absolute;}

.sun {
	left: 50%;
	bottom: 200px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
	box-shadow: 0px -20px 200px #FFFF8C;
}

.land {
	left: 50%;
	width: 2000px;
	height: 2000px;
	border-radius: 50%;
}

.l1{bottom:-1850px;margin-left:-1100px;background:#d0a273}
.l2{bottom:-1700px;margin-left:-300px;background:#c4884d}
.l3{bottom:-1900px;margin-left:-800px;background:#a66f37}
.l4{bottom:-1800px;margin-left:-1700px;background:#80552b}

.windmill {
	width: 2px;
}

.windmill .turbine {
	top: -5px;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	  -webkit-animation: 7s rotate infinite linear;
		animation: 7s rotate infinite linear;
}

.windmill .t{left:2px;width:0;height:0;border-style:solid;border-color:transparent;-webkit-transform-origin:bottom;transform-origin:bottom}

.windmill.s1{width:2px;height:15px}
.windmill.s1 .t{top:-2px;left:4px;width:2px;height:7px;border-width:0}
.windmill.s2{height:20px;-webkit-transform:rotateY(120deg);-ms-transform:rotateY(120deg);transform:rotateY(120deg)}
.windmill.s2 .t{top:-10px;border-bottom-width:12px}
.windmill.s3{height:35px}
.windmill.s3 .t{top:-18px;border-bottom-width:20px}
.windmill.s4{height:50px}
.windmill.s4 .t{top:-28px;border-bottom-width:30px}

.l1 .s1{background:#d0a273}
.l1 .s1 .t{background:#d0a273}
.l2 .s2{background:#c4884d}
.l2 .s2 .t{border-bottom-color:#c4884d}
.l3 .s3{background:#a66f37}
.l3 .s3 .t{border-bottom-color:#a66f37}
.l4 .s4{background:#80552b}
.l4 .s4 .t{border-bottom-color:#80552b}

.s1:nth-child(1){top:-5px;left:870px}
.s1:nth-child(2){top:-12px;left:970px}
.s1:nth-child(3){top:-9px;left:1070px}
.s2:nth-child(1){top:125px;left:485px}
.s2:nth-child(2){top:85px;left:555px}
.s2:nth-child(3){top:50px;left:635px}
.s3:nth-child(1){top:-10px;left:780px}
.s3:nth-child(2){top:-30px;left:940px}
.s3:nth-child(3){top:-25px;left:1120px}
.s4:nth-child(1){top:-25px;left:1200px}
.s4:nth-child(2){top:28px;left:1380px}
.s4:nth-child(3){top:125px;left:1560px}

.t1{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.t2{-webkit-transform:rotate(120deg);transform:rotate(120deg)}
.t3{-webkit-transform:rotate(240deg);transform:rotate(240deg)}

@-webkit-keyframes rotate {
  100% {
	-webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
	-webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
  }
}

/*
=================================
						MENU STYLE
=================================
*/

.menu {
		position: absolute;
  width: 100%;
  max-width: 900px;
  margin: auto;
  border: 2px solid #fff;
  background: #ddd;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.menu * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5%;
  min-height: 34px;
  border: 2px solid #fff;
}

.menu .main {
  border: 0;
  padding: 0;
  background: #abc;
}
.menu .main:before {
  color: #468;
}
.menu .content:before {
  color: #fff;
}

.header {
  padding-bottom: 8%;
}

.header:before {
  content: "<header>";
}

.main {}

.main:before {
  content: "<main>";
}

.content {}

.content:before {
  content: "<article>";
}

.footer:before {
  content: "<footer>";
}

 

.

HTML

Скрытый текст 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Windmill Landscape</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">


		<link rel="stylesheet" href="css/style.css">



<style>
</style>

		<script type="text/javascript">
			/* =============================
			This script generates sample text for the body content. 
			You can remove this script and any reference to it. 
			 ============================= */
			var bodyText=["The smaller your reality, the more convinced you are that you know everything.", "If the facts don't fit the theory, change the facts.", "The past has no power over the present moment.", "This, too, will pass.", "</p><p>You will not be punished for your anger, you will be punished by your anger.", "Peace comes from within. Do not seek it without.", "<h3>Heading</h3><p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now."]
			function generateText(sentenceCount){
				for (var i=0; i<sentenceCount; i++)
				document.write(bodyText[Math.floor(Math.random()*7)]+" ")
			}
		</script>

</head>
<body>


<div class='wrapper'>
<!--
================================
						LANDSCAPE
==============================-->
<div class='landscape'>
<div class='sun'></div>

	<div class='land l1'>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s1'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>

	<div class='land l2'>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s2'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>

	<div class='land l3'>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s3'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>
  
	<div class='land l4'>
		<div class='windmill s4'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s4'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
		<div class='windmill s4'>
			<div class='turbine'>
				<div class='t t1'></div>
				<div class='t t2'></div>
				<div class='t t3'></div>
			</div>
		</div>
	</div>

</div>	<!--landscape-->

<!--
================================
							MENU
==============================-->
<div class="menu">
	<header class="header"></header>
		<main class="main">
			<article class="content"><p><!--<script>generateText(20)</script>--></p></article>
		</main>
	<footer class="footer"></footer>
</div>


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



</body>
</html>

 

.

.

Планируемый макет выглядит примерно таким образом:

.

Windmill.jpg

Edited by lnva
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
lnva Explorer

lnva

Posted
  • Author
Posted

Так я уже пробовал, при этом контент из меню выходит за пределы обвертки (wrappper) и фона (landscape). https://jsfiddle.net/2n487fdn/

А как сделать прокрутку "menu", чтобы фон оставался на месте?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept