Контент начинается под header
body {
margin: 0;
}
/*header*/
header {
position: fixed;
color: white;
width: 100%;
height: 70px;
top: 0;
}
#container {
height: 70px;
width: 100%;
margin: 0;
background-color: #067d7d;
}
#container_content {
height: 50px;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
font-size: 170%;
}
#header-left {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
float: left;
height: 35px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 30px;
overflow: auto;
}
/*content*/
#content_inner {
color: black;
}
#content {}
#content_inner {
margin-left: 20px;
margin-right: 20px;
}
.content_title {
font-size: 170%;
margin-top: 20px;
}
li,
p {
font-size: 125%;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}<div id="wrapper">
<header>
<div id="panel">
<div id="container">
<div id="container_content">
<div id="header-left">
<b>Hay day bot 2020</b>
</div>
</div>
</div>
</div>
</header>
<div id="content">
<div id="content_inner">
<div class="content_title"><b> Why should you choose this bot?</b></div>
<ul>
<li>The fastest hay day bot</li>
<li>You can change price for selling wheat</li>
<li>You can change the speed of bot</li>
<li>The bot works after the latest update</li>
<li>Bot can grow wheat or corn</li>
<li>You can change amount of your farms for work bot</li>
<li>Bot can collect honey</li>
<li>You will haven't been banned in hay day</li>
</ul>
<hr>
<div class="content_title"><b>What are your requirements?</b></div>
<ul>
<li>Computer/Laptop</li>
<li>Hay day account(s)</li>
<li>Programm "Nox"(for bot)</li>
<li>Programm "TeamViewer" (To manage your pc and install bot)</li>
</ul>
<hr>
<div class="content_title"><b>How does the bot work?</b></div>
<ul>
<li>
<details>
<summary>1 farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will wait for 2 minutes and do it over and over</p>
</details>
</li>
<li>
<details>
<summary>1+ farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will switch to the next farm and do it over and over </p>
</details>
</li>
</ul>
<hr>
<div class="content_title"><b>What is price for the bot?</b></div>
<p>For the present, price is $20 (forever) <br>The price will be increased in the future</p>
<hr>
<div class="content_title"><b>How can you make sure, that i am not a scammer?</b></div>
<p>If you really want to buy my bot, but you are not sure that i'm not a scammer, just write me and i will send you proofs that i'm not a scammer</p>
<hr>
<div class="content_title"><b>After you bought the bot, how can you install it?</b></div>
<p>If you payed me 20$, i will send you a link to download my nox backup. When you finish to download my nox backup, write me and i will connect to your computer by using programm "TeamViewer" and will show you how to start and stop bot
</p>
<hr>
<div class="content_title"><b>Popular questions</b></div>
<p><b>Q: Can bot work on my mobile phone?</b><br>A: No, because bot needs root,screen resolution (640x480x120) and a lot of settings</p>
<p><b>Q: What level do i need for the bot</b><br>A: You need farm(s) from 7 lvl and have minimum 10 slots in your shop</p>
</div>
</div>
</div>Мне надо чтобы контент располагался после header и header был фиксированным
уже пофиксил, спасибо всем!!!!!!!!!!!!!!
Ответы (1 шт):
Автор решения: Михаил Камахин
→ Ссылка
Например так
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
ul,
p {
margin: 10px 0;
}
ul {
margin: 10px 0 10px 20px;
}
/*header*/
header {
position: fixed;
color: white;
width: 100%;
top: 0;
background-color: #067d7d;
padding: 15px 0;
height: 77px;
}
.header__title {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-size: 40px;
white-space: nowrap;
}
/*content*/
#content {
margin-top: 85px;
}
#content_inner {
margin-left: 20px;
margin-right: 20px;
}
.content_title {
font-size: 170%;
margin-top: 20px;
}
li,
p {
font-size: 125%;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}<div id="wrapper">
<header>
<div class="container">
<div class="header__title">Hay day bot 2020</div>
</div>
</header>
<div id="content">
<div class="container">
<div class="content_title"><b> Why should you choose this bot?</b></div>
<ul>
<li>The fastest hay day bot</li>
<li>You can change price for selling wheat</li>
<li>You can change the speed of bot</li>
<li>The bot works after the latest update</li>
<li>Bot can grow wheat or corn</li>
<li>You can change amount of your farms for work bot</li>
<li>Bot can collect honey</li>
<li>You will haven't been banned in hay day</li>
</ul>
<hr>
<div class="content_title"><b>What are your requirements?</b></div>
<ul>
<li>Computer/Laptop</li>
<li>Hay day account(s)</li>
<li>Programm "Nox"(for bot)</li>
<li>Programm "TeamViewer" (To manage your pc and install bot)</li>
</ul>
<hr>
<div class="content_title"><b>How does the bot work?</b></div>
<ul>
<li>
<details>
<summary>1 farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will wait for 2 minutes and do it over and over</p>
</details>
</li>
<li>
<details>
<summary>1+ farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will switch to the next farm and do it over and over </p>
</details>
</li>
</ul>
<hr>
<div class="content_title"><b>What is price for the bot?</b></div>
<p>For the present, price is $20 (forever) <br>The price will be increased in the future</p>
<hr>
<div class="content_title"><b>How can you make sure, that i am not a scammer?</b></div>
<p>If you really want to buy my bot, but you are not sure that i'm not a scammer, just write me and i will send you proofs that i'm not a scammer</p>
<hr>
<div class="content_title"><b>After you bought the bot, how can you install it?</b></div>
<p>If you payed me 20$, i will send you a link to download my nox backup. When you finish to download my nox backup, write me and i will connect to your computer by using programm "TeamViewer" and will show you how to start and stop bot
</p>
<hr>
<div class="content_title"><b>Popular questions</b></div>
<p><b>Q: Can bot work on my mobile phone?</b><br>A: No, because bot needs root,screen resolution (640x480x120) and a lot of settings</p>
<p><b>Q: What level do i need for the bot</b><br>A: You need farm(s) from 7 lvl and have minimum 10 slots in your shop</p>
</div>
<!-- .container -->
</div>
</div>А можно вообще не делать блок fixed, но он будет как бы fixed
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
:root {
--height_header: 77px;
/* высота header */
}
ul,
p {
margin: 10px 0;
}
ul {
margin: 10px 0 10px 20px;
}
/*header*/
header {
color: white;
width: 100%;
top: 0;
background-color: #067d7d;
padding: 15px 0;
height: var(--height_header);
}
.header__title {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-size: 40px;
white-space: nowrap;
}
/*content*/
#content {
height: calc(100vh - var(--height_header));
/* 100% высоты экрана минус высота header*/
overflow-y: auto;
}
#content_inner {
margin-left: 20px;
margin-right: 20px;
}
.content_title {
font-size: 170%;
margin-top: 20px;
}
li,
p {
font-size: 125%;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}<div id="wrapper">
<header>
<div class="container">
<div class="header__title">Hay day bot 2020</div>
</div>
</header>
<div id="content">
<div class="container">
<div class="content_title"><b> Why should you choose this bot?</b></div>
<ul>
<li>The fastest hay day bot</li>
<li>You can change price for selling wheat</li>
<li>You can change the speed of bot</li>
<li>The bot works after the latest update</li>
<li>Bot can grow wheat or corn</li>
<li>You can change amount of your farms for work bot</li>
<li>Bot can collect honey</li>
<li>You will haven't been banned in hay day</li>
</ul>
<hr>
<div class="content_title"><b>What are your requirements?</b></div>
<ul>
<li>Computer/Laptop</li>
<li>Hay day account(s)</li>
<li>Programm "Nox"(for bot)</li>
<li>Programm "TeamViewer" (To manage your pc and install bot)</li>
</ul>
<hr>
<div class="content_title"><b>How does the bot work?</b></div>
<ul>
<li>
<details>
<summary>1 farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will wait for 2 minutes and do it over and over</p>
</details>
</li>
<li>
<details>
<summary>1+ farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will switch to the next farm and do it over and over </p>
</details>
</li>
</ul>
<hr>
<div class="content_title"><b>What is price for the bot?</b></div>
<p>For the present, price is $20 (forever) <br>The price will be increased in the future</p>
<hr>
<div class="content_title"><b>How can you make sure, that i am not a scammer?</b></div>
<p>If you really want to buy my bot, but you are not sure that i'm not a scammer, just write me and i will send you proofs that i'm not a scammer</p>
<hr>
<div class="content_title"><b>After you bought the bot, how can you install it?</b></div>
<p>If you payed me 20$, i will send you a link to download my nox backup. When you finish to download my nox backup, write me and i will connect to your computer by using programm "TeamViewer" and will show you how to start and stop bot
</p>
<hr>
<div class="content_title"><b>Popular questions</b></div>
<p><b>Q: Can bot work on my mobile phone?</b><br>A: No, because bot needs root,screen resolution (640x480x120) and a lot of settings</p>
<p><b>Q: What level do i need for the bot</b><br>A: You need farm(s) from 7 lvl and have minimum 10 slots in your shop</p>
</div>
<!-- .container -->
</div>
</div>А ещё можно с помощью position: sticky, тогда вообще не надо знать высоту header
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 10px;
}
ul,
p {
margin: 10px 0;
}
ul {
margin: 10px 0 10px 20px;
}
/*header*/
header {
position: sticky;
color: white;
width: 100%;
top: 0;
background-color: #067d7d;
padding: 15px 0;
}
.header__title {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-size: 40px;
white-space: nowrap;
}
/*content*/
#content_inner {
margin-left: 20px;
margin-right: 20px;
}
.content_title {
font-size: 170%;
margin-top: 20px;
}
li,
p {
font-size: 125%;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}<div id="wrapper">
<header>
<div class="container">
<div class="header__title">Hay day bot 2020</div>
</div>
</header>
<div id="content">
<div class="container">
<div class="content_title"><b> Why should you choose this bot?</b></div>
<ul>
<li>The fastest hay day bot</li>
<li>You can change price for selling wheat</li>
<li>You can change the speed of bot</li>
<li>The bot works after the latest update</li>
<li>Bot can grow wheat or corn</li>
<li>You can change amount of your farms for work bot</li>
<li>Bot can collect honey</li>
<li>You will haven't been banned in hay day</li>
</ul>
<hr>
<div class="content_title"><b>What are your requirements?</b></div>
<ul>
<li>Computer/Laptop</li>
<li>Hay day account(s)</li>
<li>Programm "Nox"(for bot)</li>
<li>Programm "TeamViewer" (To manage your pc and install bot)</li>
</ul>
<hr>
<div class="content_title"><b>How does the bot work?</b></div>
<ul>
<li>
<details>
<summary>1 farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will wait for 2 minutes and do it over and over</p>
</details>
</li>
<li>
<details>
<summary>1+ farm</summary>
<p>The Bot will harvest,plant the crop and sell wheat/corn. Then he will switch to the next farm and do it over and over </p>
</details>
</li>
</ul>
<hr>
<div class="content_title"><b>What is price for the bot?</b></div>
<p>For the present, price is $20 (forever) <br>The price will be increased in the future</p>
<hr>
<div class="content_title"><b>How can you make sure, that i am not a scammer?</b></div>
<p>If you really want to buy my bot, but you are not sure that i'm not a scammer, just write me and i will send you proofs that i'm not a scammer</p>
<hr>
<div class="content_title"><b>After you bought the bot, how can you install it?</b></div>
<p>If you payed me 20$, i will send you a link to download my nox backup. When you finish to download my nox backup, write me and i will connect to your computer by using programm "TeamViewer" and will show you how to start and stop bot
</p>
<hr>
<div class="content_title"><b>Popular questions</b></div>
<p><b>Q: Can bot work on my mobile phone?</b><br>A: No, because bot needs root,screen resolution (640x480x120) and a lot of settings</p>
<p><b>Q: What level do i need for the bot</b><br>A: You need farm(s) from 7 lvl and have minimum 10 slots in your shop</p>
</div>
<!-- .container -->
</div>
</div>