1
Проблема в том, что если я поставлю h1 в документе, он займет страницу до нижнего колонтитула. Без flexbox это не произойдет. Это похоже на то, что название занимает один столбец, а в абзаце другой. h1 должен выровняться над абзацем.Сделать элементы выровнены по вертикали в flexbox
https://jsfiddle.net/45j2yrzp/
html {
display: flex;
flex-direction: column;
}
/* IE fix */
body {
display: flex;
/* crée un contexte flex pour ses enfants */
flex-direction: column;
/* affichage vertical */
min-height: 100vh;
/* toute la hauteur du viewport (compatible IE9+) */
font-family: cursive, sans-serif, serif;
}
.wrapper {
display: block;
/* IE fix */
flex: 1 1 auto;
/* occupe la hauteur restante */
display: flex;
/* crée un contexte flex pour ses enfants */
flex-direction: row;
/* affichage horizontal */
}
.content {
display: flex;
/* IE fix */
flex: 1;
/* occupe la largeur restante */
}
aside {
position: fixed;
border-radius: 50%;
height: 70px;
width: 70px;
top: 50%;
background-color: #fff;
border: 2px solid #cecece;
}
.left {
left: 10%;
}
.right {
right: 10%;
}
.arrow_left {
display: block;
position: relative;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #cecece;
top: 20%;
left: 25%;
}
.arrow_right {
display: block;
position: relative;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 25px solid #cecece;
top: 20%;
left: 40%;
}
aside:hover {
border-color: #ff5722;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.80);
}
.left:hover .arrow_left {
border-right-color: #ff5722;
}
.right:hover .arrow_right {
border-left-color: #ff5722;
}
/* Decoration */
body {
background: #eeeeee;
font-size: 1.1em;
}
footer {
height: 40px;
width: 100%;
text-align: center;
background-color: #303030;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
color: white;
}
section {
margin: 45px 20% 0px 20%;
background-color: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
overflow: hidden;
}
ul.menu {
position: fixed;
display: flex;
top: 0;
font-size: 100%;
width: 100%;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
list-style-type: none;
background-color: #303030;
color: white;
}
li a {
float: left;
padding: 13px 16px;
text-align: center;
}
li a:hover {
background-color: #ff5722;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.80);
}
#home {
position: absolute;
top: 0;
right: 0;
}
li.active {
background-color: #ff5722;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
}
li a {
display: block;
color: white;
}
address {
margin-top: 3px;
}
/*End of the structure of the page*/
a {
color: #ff5722;
text-decoration: none;
}
span {
color: #ff5722;
}
p {
word-break: break-all;
margin: 15px 30px;
}
img {
height: 75%;
width: 100%;
}<header>
<ul class="menu">
<li><a href="">Option 1</a>
</li>
<li><a href="">Option 2</a>
</li>
<li><a href="">Option 3</a>
</li>
<li><a href="">Option 4</a>
</li>
<li><a href="">Option 5</a>
</li>
<li class="active"><a href="">Option 1</a>
</li>
<li><a href="">Option 1</a>
</li>
<li id="home"><a href="index.html">Home</a>
</li>
</ul>
</header>
<div class="wrapper">
<section class="content">
<h1>HELLO THIS IS THE TITLE</h1>
<br>
<br>
<br>
<br>
<p>hello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
is the paragraphhello this is the paragraph</p>
</section>
<aside class="left">
<div class="arrow_left"></div>
</aside>
<aside class="right">
<div class="arrow_right"></div>
</aside>
</div>
<!-- /wrapper -->
<footer>
<address>Name Surname<br><a href="mailto:[email protected]">[email protected]</a></address>
</footer>
Я не верю, что есть какая-то причина, по которой вам нужен flexbox. Все элементы являются блочными элементами по умолчанию и предоставляют обертку 'display: flex' и' flex-direction: column' ничего не меняет. – JackHasaKeyboard