1
Das Problem ist, dass wenn ich ein h1 in das Dokument einfüge, es die Seite bis zur Fußzeile aufruft. Ohne flexbox wird das nicht passieren. Es ist, als ob der Titel eine Spalte und der Absatz eine andere Spalte belegt. Die h1 muss über dem Absatz ausgerichtet werden.Elemente in Flexbox vertikal ausrichten
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>
Ich glaube nicht, dass es einen Grund gibt, warum Sie eine Flexbox möchten. Alle Elemente sind standardmäßig Blockelemente und die Wrapper 'display: flex' und' flex-direction: column' ändern nichts. – JackHasaKeyboard