0

Перепробовал уже много способов, но всё никак не получается.

@Charset "UTF-8"; 
    * {   
    	margin: 0;
    	outline: none; 
    } 
    
    body, html {height: 100%}
    
    body { 
    	width: 100%; 
    	height: 100%; 
    	background-color: #FAEEDD; 
    	color: black;
    	font-size: 1em;
    	font-family: comic sans ms, sans-serif; 
    } 
    
    a {
    	text-decoration: none;
    	color: black;
    }
    
    img {
    	width: 25%;
    	height: 25%;
    	width: auto/9;
    	margin-left: 260px;
    }
    
    .left {float: left};
    /* в img максимально 100% изоброжение будет подстраиватся под блок и не вылезать из него и auto/9 это для эксплоера браузера*/
    
    header, footer { 
    	width: 98%; 
    	min-height: 50px; 
    	float: left;
    	background-color: white;
    } 
    
    header { 
    	border-bottom: 3px solid grey; 
    	padding: 1%;
    	background-color: white;
    } 
    
    aside {
    	width: 400px;
    	height:605px;
    	max-width: 100%;
    	border: 3px solid grey;
    	border-top: 0px; 
    	font-size: 25px;
    	background-color: white;
    	padding-top: 10px;
    	font-weight: bold;
    	border-bottom-left-radius: 25px;
    	border-bottom-right-radius: 35px;
    }
    
    hr {
    	display: block;
    	border: 0;
    	height: 1px;
    	border-top: 2px solid grey;
    	padding: 0;
    }
    
    center {
    	width: 1000px;
    	height: 500px;
    	max-width: 100%;
    	border: 0px solid grey;
    	background-color: #FAEEDD;
    	font-size: 35px;
    	font-weight: bold;
    	position: absolute; top: 260px; left: 500px; 
    }
    
    .colortext {color: red};
    /* стили для футера*/
    
    footer { 
    	border-top: 3px solid grey; 
    	margin-top: 10px; 
    	padding: 1%;
    	font-weight: bold;
    }
    
    .content:after {
     content: "";
     display: block;
    }
    .content:after, footer {
     height: 10px;
    }
    .content {
     min-height: 77%;
     margin-bottom: -10px;
    }
<body>
<header>
  <a href="englishfan.html" title="Homepage" id="logo"><img src="img/london1.jpg" alt="LearningEnglish" title="LearningEnglish" /></a>
</header>

<aside>
  <div id="menuhrefs"></div><pre><a href="presentsimple.html"> Present simple</a>
  <hr /><a href="pastsimple.html"> Past simple</a>
  <hr /><a href="presentcontinuous.html"> Present continuous</a>
  <hr /><a href="pastcontinuous.html"> Past continuous</a>
  <hr /><a href="presentperfect.html"> Present perfect</a>
  <hr /><a href="pastperfect.html"> Past perfect</a>
  <hr /><a href="presentperfectcontinuous.html"> Present perfect continuous</a>
  <hr /><a href="cancould.html"> Can, could</a>
  <hr /><a href="willwould.html"> Will, would</a>
  <hr /><a href="reading.html"> Reading</a></pre>
</aside>

<center>
  On this site you can find:<br /><br />
  <span class="colortext">Basic grammar English rules</span> (you can learn the rules that are easy to understand and easy to learn).<br /><br />
  <span class="colortext">Exercises in English</span> (you can do any exercises for present, past and future).<br /><br />
  <span class="colortext">Tests reading</span> (if you want to do tests on READING you don't need pay for it, it’s all for free).<br /><br />
</center>

<div class="content"></div>
<footer>
  <span class="left">Privacy policy &copy; 2018</span>
</footer>

2
  • 1
    position: fixed; - зафиксирует ваш футер, див, спан, что хотите, то и зафиксирует.
    – test123
    13 мар 2018 в 13:07
  • 1
    что значит зафиксировать? прижать к низу страницы?
    – soledar10
    13 мар 2018 в 13:26

2 ответа 2

0

.flex {
  display: flex;
  align-items: flex-end;
  height: 400px;
  border: 1px solid red;
}

.flex-itm {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
}
<div class="flex">
  <div class="flex-itm">1</div>
  <div class="flex-itm">1</div>
  <div class="flex-itm">1</div>
  <div class="flex-itm">1</div>
  <div class="flex-itm">1</div>
  <div class="flex-itm">1</div>
</div>

Через флексы можно попробовать

-1

Попробуйте так:

.footer{
 margin:-550px;
 height:550px;
}

.clr {
 clear:both;
 height:550px
}
<div class="clr"></div>
<div class="footer"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.